1. 編輯一個HTML檔(例如: googleMap.html)，並放置到asset目錄。在html檔中置入一個<div>標籤，大小為全螢幕，用來顯示Google Map。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(23.937591,120.700807); //地圖中心點
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP //道路地圖
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
2. 在版面配置中加入一個WebView元件
<RelativeLayout ...>
<WebView android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>
3. 撰寫MainActivity程式，設定WebView啟用JavaScript功能，之後載入googleMap.html。
public class MainActivity extends Activity{
private static final String MAP_URL = "file:///android_asset/googleMap.html";
private WebView webView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setupWebView();
this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
private void setupWebView(){
webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(MAP_URL);
}
}
發表文章
