本实例主要是基于Map JavaScript API V3的,因此扩平台性很好。
[java]
package com.example.simplemap;
import java.io.InputStream;
import org.xml.sax.InputSource;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.view.Menu;
import android.webkit.WebView;
import android.webkit.WebViewClient;
@SuppressLint("JavascriptInterface")
public class MainActivity extends Activity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
try{
InputStream is = getResources().getAssets().open("simple_map.html");
byte[] buffer = new byte[2000];
int count = is.read(buffer);
String mapStr = new String(buffer, 0, count, "utf-8");
is.close();
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient());
mWebView.addJavascriptInterface(new Object()
{
public void showDialog(String title, float latitude, float longitude)
{
new AlertDialog.Builder(MainActivity.this)
.setTitle(title).setIcon(R.drawable.ic_launcher)
.setMessage("纬度:" + latitude + "\n经度:" + longitude)
.show();
}
}, "android");
mWebView.loadDataWithBaseURL(null, mapStr, "text/html", "utf-8", null);
}catch(Exception e){
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
[/java]
[html]
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style type="text/css">
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
@media print {
html,body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(30.211321, 120.210555),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(‘map_canvas’),
mapOptions);
var p = new google.maps.LatLng(30.211321, 120.210555);
var marker = new google.maps.Marker({
position: p,
map: map
});
google.maps.event.addListener(marker, ‘click’, function() {
window.android.showDialog("柏悦轩", p.lat(), p.lng());
});
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
[/html]
[xml]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView
android:id="@+id/webview" android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
[/xml]
完整项目地址
http://pan.baidu.com/s/1jGmLvim