Android 地圖與定位 (Maps and Positioning)(2)

Maps and Positioning

在應用程式中使用 GoogleMap 類別來建立地圖物件，地圖物件可以在 MapFragment 或 MapView 中顯示。

GoogleMap 幫我們做了哪些事：

• 連結到 Google Maps service。
• 下載圖資。
• 在螢幕上顯示地圖。
• 顯示控制按鈕，例如平移及縮放。
• 執行平移及縮放手勢。

使用地圖

MapFragment

MapFragment 是一個放置地圖的容器，是 Fragment 的子類別。Google Maps Android API 要求 API level 12(Android 3.1) 或更高的 API 來支援 MapFragment 物件。假如要使用較舊的 API ，可以透過 SupportMapFragment 類別來達到同樣的功能，請參考 Support Library。

MapView

MapView 一樣是一個放置地圖的容器。使用 MapView 會有和 Activity 相對應的生命週期方法，onCreate()、onDestroy()、onResume()、onPause()。

取得地圖物件

GoogleMap mMap = ((MapFragment)getFragmentManager().findFragmentById(R.id.map)).getMap();

設定地圖類型

地圖共有 5 種類型：

• Normal：典型的地圖。
• Hybrid：混合衛星照片及道路地圖。
• Satellite：衛星照片。
• Terrain：地形圖。
• None：什麼都沒有。

使用 setMapType 即可改變類型，如下：

mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);

初始化地圖狀態

可以設定地圖狀態有：

• 攝影機的位罝，包含 location(位置), zoom(縮放), bearing(軸承) 及 tilt(傾斜)，詳細資料請參考如何更改地圖視點。
• 地圖的類型。
• 是否顯示 zoom 按鈕及是否在螢幕上顯示羅盤。
• 使用者可以使用哪些手勢來操作地圖。

使用 xml 來設定，如下：

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:map="http://schemas.android.com/apk/res-auto"
  android:id="@+id/map"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  class="com.google.android.gms.maps.MapFragment"
  map:cameraBearing="45"
  map:cameraTargetLat="25.033611"
  map:cameraTargetLng="121.565000"
  map:cameraTilt="0"
  map:cameraZoom="13"
  map:mapType="normal"
  map:uiCompass="true"
  map:uiRotateGestures="true"
  map:uiScrollGestures="true"
  map:uiTiltGestures="true"
  map:uiZoomControls="false"
  map:uiZoomGestures="true"/>

這裡的地裡位置使用 MyGeoPosition 反查台北101後取後得 GPX 資料中的經緯度輸入 cameraTargetLat 及 cameraTargetLng 這兩個屬性。

若是使用程式碼來加入 MapFragment 或 MapView ，則可以用 GoogleMapOptions 類別來設定，如下：

GoogleMapOptions options = new GoogleMapOptions();
options.compassEnabled(false);

在 MapFragment 中使用 MapFragment.newInstance(GoogleMapOptions options)這個方法。在 MapView 中使用 MapView(Context, GoogleMapOptions)。

標記(Markers)

標記(Marker)類別可用來指出地圖上的某一個地點，預設的標記和 Google Map 中使用的一樣，你也可以自訂標記的顏色或使用其他圖示來呈現。

標記是描繪在裝置的螢幕而不是地圖的表面，所以旋轉、傾斜及縮放等的動作並不需要去對標記做相對應的改變。標記被設計成可以和使用者互動，預設能接收 click 事件，若將 draggable 屬性設成 true，則可以讓使用者在長按標記後移動它。

新增標記

使用 MarkerOptions 類別來建立標記選項，使用 LatLng 類別來建立經緯度，所以程式碼如下：

MarkerOptions markerOpt = new MarkerOptions();
markerOpt.position(new LatLng(25.033611, 121.565000));
markerOpt.title("台北101");
markerOpt.draggable(true);

mMap.addMarker(markerOpt);

我將標記設在台北101的經緯度，在標記上點一下會出現 "台北101" 的標題，長按可移動標記。

自訂標記

可自訂的標記屬性：

• Position(必要)：使用 LatLng 類別來設定位置，這是唯一必要設定的屬性。
• Title：使用者點一下標記時顯示的標題文字。
• Snippet：額外的文字，顯示在標題文字下方。
• Draggable：是否可以讓使用者移動標記，true 可移動；false 則否。
• Visible：是否顯示標記，true 顯示；false隱藏。
• Anchor：圖片上的一個點，用來定位到經緯度座標，預設為圖片的中間下緣。值為左上角(0.0, 0.0)到右下角(1.0, 1.0)。
• Icon：圖示，被放置在原標記的相同位置，只有第一次建立標記時可以使用圖示，之後就不能任意更換圖示。

範例程式碼：

//Marker1
MarkerOptions markerOpt = new MarkerOptions();
markerOpt.position(new LatLng(25.033611, 121.565000));
markerOpt.title("台北101");
markerOpt.snippet("於1999年動工，2004年12月31日完工啟用，樓高509.2公尺。");
markerOpt.draggable(false);
markerOpt.visible(true);
markerOpt.anchor(0.5f, 0.5f);//設為圖片中心
markerOpt.icon(BitmapDescriptorFactory.fromResource(android.R.drawable.ic_menu_mylocation));

mMap.addMarker(markerOpt);

//Marker2
MarkerOptions markerOpt2 = new MarkerOptions();
markerOpt2.position(new LatLng(25.047924, 121.517081));
markerOpt2.title("台北火車站");

mMap.addMarker(markerOpt2);

第一個標記一樣是台北101，圖示我隨意挑了一個 Android 內建的圖示來使用，錨點則設為該圖示的正中心；另外新增第二個標記為台北火車站，可以比較兩者的差異。

此外，你也可以改變預設圖示的顏色，程式碼如下：

//Marker3
MarkerOptions markerOpt3 = new MarkerOptions();
markerOpt3.position(new LatLng(25.042902, 121.515030));
markerOpt3.title("國立台灣博物館");
markerOpt3.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

mMap.addMarker(markerOpt3);

使用 BitmapDescriptorFactory.defaultMarker(float hue) 方法可以去選擇幾種內定的顏色。

標記的資訊視窗

資訊視窗即是前面所設定的 title 屬性所顯示的資料，當使用者點選時才會顯示，並且一次只會顯示一個，當使用者點選另一個標記時，前一個標記所顯示的資訊視窗就會消失。可以在程式中呼叫 showInfoWindow() 方法來顯示資訊視窗，然後呼叫 hideInfoWindow() 方法來隱藏。

資訊視窗可以自訂樣子，必須實作 GoogleMap.InfoWindowAdapter 介面，然後呼叫 setInfoWindowAdapter (GoogleMap.InfoWindowAdapter adapter) 方法。

InfoWindowAdapter 介面只有兩個方法，getInfoWindow (Marker marker) 及 getInfoContents (Marker marker)，API 會先呼叫 getInfoWindow 這個方法，如果回傳是 null 就會呼叫 getInfoContents 方法，如果還是 null ，就會使用預設的資訊視窗。

getInfoWindow 方法可以讓你自訂整個資訊視窗的 view 也就是視窗的外觀及背景等，getInfoContents 方法則只有自訂內容，視窗的外觀則是用預設的。

下圖是官方的範例圖片：左邊是預設，中間是自訂內容，右邊是自訂視窗。 (圖片來源：https://developers.google.com/maps/documentation/android/marker?hl=zh-TW)

事件

事件種類：

• Marker click events：使用 OnMarkerClickListener 來偵聽標記被按一下的事件。
• Marker drag events：使用 OnMarkerDragListener 來偵聽標記被拖拉的事件。記得要搭配 draggable 屬性使用。
• Info window click events：使用 OnInfoWindowClickListener來偵聽資訊資窗被按一下的事件。

在地圖上畫圖

使用 Polyline 可以將地圖上的點依序連接畫出一條條的線段；使用 Polygon 可以依地圖上的點畫出一個封閉圖形。

在地圖上的點座標是由經緯度表示，所以 Polyline 基本上就由一組經緯度座標點所組成，經緯度座標使用 LatLng 類別來建立。

Polyline 需使用 PolylineOptions 類別來建立，像是加入座標點、線條顏色等，之後再使用 GoogleMap.addPolyLine 把線段加入地圖。

以下範例程式碼是從台北101畫一條路徑到台北火車站，如下：

private void drawPolyline(){
    PolylineOptions polylineOpt = new PolylineOptions();
    polylineOpt.add(new LatLng(25.033611, 121.565000));
    polylineOpt.add(new LatLng(25.032728, 121.565137));
    polylineOpt.add(new LatLng(25.033739, 121.527886));
    polylineOpt.add(new LatLng(25.038716, 121.517758));
    polylineOpt.add(new LatLng(25.045656, 121.519636));
    polylineOpt.add(new LatLng(25.046200, 121.517533));

    polylineOpt.color(Color.BLUE);

    Polyline polyline = mMap.addPolyline(polylineOpt);
    polyline.setWidth(10);
}

結果如下： 線段為藍色 10 px。

有些屬性可以在 PolylineOptions 中設定，但也可以在加入地圖後取得的 Polyline 中設定。

Polygon 實做方法基本上差不多，只是多了可以對封閉圖形填色的功能。

改變視點

透過移動攝影機的方式來改變看地圖的視點，改變攝影機不會對你加入的標記、圖層或自訂的圖片造成影響。

攝影機的屬性有：

• Target (Location)
• Zoom
• Bearing (orientation)
• Tilt (viewing angle)

Target (Location)

以經緯度座標來指定攝影機在地圖上的位置。

Zoom

縮放的層級 (level) 決定了地圖的縮放比例 (scale)。最小的層級 level 0 可以看到整個世界(寬大約是256dp)，最大的層級則可以看到地圖上最細節的資料，每升一級，地圖以寬為準的縮放比例就會放大一倍(約256 * 2^N dp)。縮放層級(level)不一定要是整數。可用的縮放層級範圍取決於數個因素，包含位置、地圖類型及螢幕尺寸。

Bearing (orientation)

以地圖的某個點畫一個垂直線，從北方順時針測量的角度。例如使用GPS導航裝置時，會以地圖朝北的方向來看地圖。API 允許開發者改變這個地圖的指向，如果把角度設為90度，那地圖就會逆時針轉向(指向是順時針，所以看起來地圖是逆時針)，東邊就會轉向地圖的正上方。

Tilt (viewing angle)

攝影機的位置是在地圖正中央的上方，以一個弧度的方式延伸到地平面(類似我們在地球上看太陽從東水平線出現，中午在頭頂，在西水平線消失)。看圖比較快： (圖片來源：https://developers.google.com/maps/documentation/android/views?hl=zh-TW)

位置1為攝影機的位置，位置2為地圖的位置，所以我們所看地圖的方式，就是從正上方往下看地圖，透過移動攝影機(位置1)在弧線上的位置，就會看到有傾斜角的地圖(像是從側面看地圖)，這個範圍從最上方的0度到最低的90度。

移動攝影機

這裡是指改變攝影機的位置來決定看到地圖上的哪部份的資料，而不是移動地圖。要改變攝影機的位置，你必須指定攝影機要移動到哪裡，使用 CameraUpdate 。Maps API 允許開發者透過 CameraUpdateFactory 建立多個不同類型的 CameraUpdate。

選項有：

• 改變縮放層級 (zoom level)
• 改變攝影機位置
• 設定邊界
• 平移或捲動

範例程式碼如下：

public void moveOnClick(View v){
    //move camera
    mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(KENTING, 15));
}

public void zoomInOnClick(View v){
    //zoom in
    mMap.animateCamera(CameraUpdateFactory.zoomIn());
}

public void zoomToOnClick(View v){
    //zoom to level 10, animating with a duration of 3 seconds
    mMap.animateCamera(CameraUpdateFactory.zoomTo(10), 3000, null);
}

public void animToOnClick(View v){
    //將攝影機移動到日月潭
    CameraPosition cameraPosition = new CameraPosition.Builder()
    .target(ZINTUN)              // Sets the center of the map to ZINTUN
    .zoom(13)                   // Sets the zoom
    .bearing(90)                // Sets the orientation of the camera to east
    .tilt(30)                   // Sets the tilt of the camera to 30 degrees
    .build();                   // Creates a CameraPosition from the builder
    mMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
}

在這篇文章中程式碼用到的地點的經緯度如下：

//台北101
final LatLng TAIPEI101 = new LatLng(25.033611, 121.565000);
//台北火車站
final LatLng TAIPEI_TRAIN_STATION = new LatLng(25.047924, 121.517081);
//國立台灣博物館
final LatLng NATIONAL_TAIWAN_MUSEUM = new LatLng(25.042902, 121.515030);

//墾丁
final LatLng KENTING = new LatLng(21.946567, 120.798713);
//日月潭
final LatLng ZINTUN = new LatLng(23.851676, 120.902008);

全部由 MyGeoPosition.com 反查。
範例程式碼下載：GoogleMapDemo.zip

參考資料：

• Map Objects
• Markers
• Polylines and Polygons
• Changing the View

本文網址：http://blog.tonycube.com/2013/01/androidmaps-and-positioning2.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀