開始撰寫吧...
在 assets 資料夾 裡添加一個html檔案：GoogleMap.html
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script type="text/javascript">
var geocoder;
var map;
function initmap(a,b) {
var m1 = new google.maps.LatLng(a,b);
geocoder =new google.maps.Geocoder();
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: m1,
position: m1
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
var marker = new google.maps.Marker({
position: m1,
map: map
});
}
function goto(address){
geocoder.geocode({'address': address },function(results, status){
if(status == google.maps.GeocoderStatus.OK){
map.setCenter(results[0].geometry.location);
var marker =new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
}
</script>
</head>
<body style="margin: 0px; padding: 0px;">
<div id="map_canvas" style="height: 100%; width: 100%;"></div>
</body>
</html>
主程式 Layout： activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
>
<WebView
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:id="@+id/wv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
/>
<ImageButton
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="@+id/bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:src="@drawable/search"
/>
</RelativeLayout>
自訂的Dialog Layout：search_dialog.xml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<EditText
android:id="@+id/et1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5.50"
/>
<Button
android:id="@+id/d_bt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="9.50"
android:textSize="22dp"
android:text="Go"
/>
</LinearLayout>
主程式：MainActivity.java
package com.example.testmap;
import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageButton;
public class MainActivity extends Activity implements LocationListener{
private EditText et1;
private ImageButton bt;
private WebView wv;
private SearchDialog sd;
private Button d_bt;
private LocationManager locationManager;
private class SearchDialog extends Dialog{
public SearchDialog(Context context) {
super(context);
setContentView(R.layout.search_dialog);
this.setTitle("請輸入...例：台中火車站");
et1 = (EditText)findViewById(R.id.et1);
et1.clearFocus();
d_bt = (Button)findViewById(R.id.d_bt);
d_bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
wv.loadUrl("javascript:goto('"+ et1.getText() + "')");
et1.setText("");
sd.dismiss();
}
});
}
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
sd = new SearchDialog(this);
bt = (ImageButton)findViewById(R.id.bt);
bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
sd.show();
}
});
wv = (WebView)findViewById(R.id.wv);
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("file:///android_asset/GoogleMap.html");
wv.addJavascriptInterface(this, "js_debug");
locationManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE);
locationManager.requestLocationUpdates(LocationManager.NETWORK_PROVIDER, 1000, 0, MainActivity.this);
}
@JavascriptInterface
public void Log(String tmp1,String tmp2) {
Log.i("debug", "tmp1 = "+tmp1+" tmp2 = "+tmp2);
}
@Override
public void onLocationChanged(Location location) {
Double longitude = location.getLongitude() ;
Double latitude = location.getLatitude() ;
locationManager.removeUpdates(MainActivity.this);
wv.loadUrl("javascript:initmap('"+ latitude + "','"+longitude+"')");
}
@Override
public void onProviderDisabled(String provider) {
}
@Override
public void onProviderEnabled(String provider) {
}
@Override
public void onStatusChanged(String provider, int status, Bundle extras) {
}
}
程式權限需開啟：網路 與 GPS定位<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
因功能上需抓取目前位置 所以做了一個 implements LocationListener的動作
當抓取到位置時將位置載入到Map上面
public void onLocationChanged(Location location) {
Double longitude = location.getLongitude() ;
Double latitude = location.getLatitude() ;
locationManager.removeUpdates(MainActivity.this);
wv.loadUrl("javascript:initmap('"+ latitude + "','"+longitude+"')");
}
wv.loadUrl("javascript:initmap('"+ latitude + "','"+longitude+"')");
此行將得到的經緯度丟至javascript initmap function 並顯示當前位置
執行結果如下：
沒有留言:
張貼留言