almost 4 years ago

1. 申請 Google Map API key

1.1. 取得 SHA-1 數位指紋

keytool
cd "C:\Program Files\Java\jre6\bin\" 
keytool -list -v -keystore "C:\Users\Gaduo\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

1.2. 到 api console 申請 Google Map API key

api console
SHA-1;package-name
API Key

1.3 建立專案,並將專案相依於 google-play-service

2. 組態設定

2.1. 加入使用者權限

permission
<permission android:name="com.gaduo.googlemap.permission.MAPS_RECEIVE" android:protectionLevel="signature" />
<uses-permission android:name="com.gaduo.googlemap.permission.MAPS_RECEIVE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-feature android:glEsVersion="0x00020000" android:required="true"/>

2.2. 加入 Meta-data

內 Activity 下加入以下程式,並填入事先申請的 API Key

meta-data
<meta-data 
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />
<meta-data  
    android:name="com.google.android.maps.v2.API_KEY" 
    android:value="API Key" />

3. 前端,加入 gms.maps.MapView

layout
<com.google.android.gms.maps.MapView 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/map"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />         

4. 後端,控制地圖

  • 事件:click 事件監聽器
  • CameraUpdate:center、zoom
    • 這裡個 Camera 代表看地圖的視角,可透過程式移動至地圖中心(自行給定一個座標),或是 zoom in、zoom out 大約有 20 個層級
  • MarkerOptions:在地圖上標記
  • PolylineOptions:在地圖上畫線

4.1. 示範程式

MapFragment
public class MapFragment extends Fragment{
    private LatLng Hualien = new LatLng(23.992797, 121.601346);
    private MapView mapView;
    private GoogleMap map;

    private List<LocationModel> list;
    
    public static MapFragment newInstance(int id){
        MapFragment mf = new MapFragment();
        Bundle bundle = new Bundle();
        bundle.putInt("id", id);
        mf.setArguments(bundle);
        return mf;
    }   

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_map, container, false);
        
        // 取得參數,此 id 代表地圖的 id
        Bundle args = getArguments();
        int id = args.getInt("id");
    
        // 透過 map id 向資料庫取得座標
        SQLiteLocationRepository rep = new SQLiteLocationRepository(this.getActivity());
        list = rep.findByMapId(id);
        
        // 初始化 mapView
        mapView = (MapView) rootView.findViewById(R.id.map);
        mapView.onCreate(savedInstanceState);
        return rootView;
    }

    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
        int resultCode = GooglePlayServicesUtil.isGooglePlayServicesAvailable(getActivity());
        if (resultCode == ConnectionResult.SUCCESS) {
            Toast.makeText(getActivity(), "isGooglePlayServicesAvailable SUCCESS", Toast.LENGTH_LONG).show();
            setUpMapIfNeeded();
        } else {
            GooglePlayServicesUtil.getErrorDialog(resultCode, getActivity(), 1);
        }
    }

    private void setUpMapIfNeeded() {
        MapsInitializer.initialize(getActivity());
        map = mapView.getMap();
        if (map != null) {
            Log.v("Main", "setUpMap");
            setUpMap();
        }
    }

    private void setUpMap() {
        CameraUpdate center = CameraUpdateFactory.newLatLng(Hualien);
        // 移動至花蓮市
        map.moveCamera(center);
        map.addMarker(new MarkerOptions().position(Hualien).title("Hualien"));
        // zoom in
        CameraUpdate zoom = CameraUpdateFactory.zoomTo(16);
        map.moveCamera(zoom);
    
        // 設定地圖類型,可為一般道路、衛星圖層 ... 
        // 是否取得使用者目前位置
        /* click 事件監聽器 */
        /* 在地圖上畫軌跡圖 */
        map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
        map.setMyLocationEnabled(true);
        map.setOnMapClickListener(click);
        drawable();
    }

    /* click 事件監聽器 */
    private OnMapClickListener click = new OnMapClickListener() {
        @Override
        public void onMapClick(LatLng point) {
            /* 點擊地圖移動至以花蓮市為中心的地圖畫面 */
            CameraUpdate center = CameraUpdateFactory.newLatLng(Hualien);
            map.animateCamera(center);
        }
    };

    /* 在地圖上畫軌跡圖 */
    private void drawable() {
        if (list.size() == 0)
            return;
        // list 由 Repository 從資料庫取得
        LatLng LatLng = list.get(0).getLatLng();
        if(LatLng == null) return;
        // 將第一點標上 Marker
        MarkerOptions markerOptions = new MarkerOptions();
        markerOptions.position(LatLng);
        for (int i = 1; i < list.size(); i++) {
            // 取得第一點座標
            LatLng LatLng01 = list.get(i - 1).getLatLng();
            if(LatLng01 == null) return;
            // 取得第二點座標
            LatLng LatLng02 = list.get(i).getLatLng();
            if(LatLng02 == null) return;
            // 初始化一條線
            // 設定為紅色
            // 加入座標一
            // 加入座標二
            // 將此線加入至地圖
            PolylineOptions polylineOptions = new PolylineOptions();
            polylineOptions.color(Color.RED);
            polylineOptions.add(LatLng01);
            polylineOptions.add(LatLng02);
            map.addPolyline(polylineOptions);
        }
    }

    @Override
    public void onLowMemory() {
        super.onLowMemory();
        mapView.onLowMemory();
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mapView.onSaveInstanceState(outState);
    }
    
}
← HL7 - HL7v2 第三方函式庫 - HAPI Android - 取得 GPS 資訊 - LocationListener →
 
comments powered by Disqus