[Android開發教學] 在Android加入地圖與標示

這篇要分享如何在Android APP加入Google Map和標示地點。

申請Google Map API Key

首先進入Google Developer Console,新增一個新專案


從選單進入API,搜尋「Google Map」,下方的搜尋結果中點選「Google Map Android API v2」

然後按下「Enable API」按鈕,將「Google Map Android API v2」啟用

回到右邊選單進入Credentials功能,按下「Create new key」新增一組API Key,記住右邊顯示的API Key


AndroidManifest.xml

回到Android Studio,打開AndroidManifest.xml,有兩處要新增

加上Google Map API Key
<meta-data
          android:name="com.google.android.maps.v2.API_KEY"
          android:value="API Key" />

增加資料寫入權限
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Layout

在Layout加上Map Fragment
<fragment
        android:id="@+id/map_fragment"
        class="com.google.android.gms.maps.MapFragment"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

Java Code

回到程式,首先當地圖載入時,要將位置置中,如果沒有這個動作,地圖載入後會是一張世界地圖,程式裡的變數toLat和toLng是置中位置的經緯度,15則是room-in值,可視需求替換。
Double toLat;
Double toLng;

GoogleMap map = 
     ((MapFragment) getFragmentManager().findFragmentById(R.id.map_fragment)).getMap();
map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
map.getUiSettings().setZoomControlsEnabled(true);

CameraUpdate center=
        CameraUpdateFactory.newLatLngZoom(new LatLng(tpLat, toLng, 15);
map.animateCamera(center);


接下來,在地圖上標示位置(下面範例將現在位置標示成黃色,目標位置標示成紅色)
//標示現在位置
MarkerOptions markerOpt = new MarkerOptions();
markerOpt.position(new LatLng(fromLat, fromLng));
markerOpt.title("現在位置");
markerOpt.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_YELLOW));
map.addMarker(markerOpt).showInfoWindow();

//標示目標位置
MarkerOptions markerOpt2 = new MarkerOptions();
markerOpt2.position(new LatLng(toLat, toLng));
markerOpt2.title("目標位置");
markerOpt2.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED));
map.addMarker(markerOpt2).showInfoWindow();

最後,在兩點之間畫上一條線
PolylineOptions polylineOpt = new PolylineOptions();
polylineOpt.add(new LatLng(fromLat, fromLng));
polylineOpt.add(new LatLng(toLat, toLng));

//線條顏色
polylineOpt.color(Color.BLUE);
//線條寬度
polyline.setWidth(10);
Polyline polyline = map.addPolyline(polylineOpt);

最後的結果會是這樣

相關文章

如何將電腦畫面經由 Chromecast 投放到電視螢幕上

Chrome 的檔案續傳功能

Mac與Android裝置傳輸檔案的方法

使用 Vysor 在電腦上控制 Android 裝置