Google 地圖 Maps

插件地址：https://github.com/wf9a5m75/phonegap-googlemaps-plugin/

(1)創(chuàng)建工程

引用

cordova create HelloMap com.rensanning.cordova HelloMap 
cd HelloMap 
cordova platform add android

(2)創(chuàng)建 Google Play Services 的 lib

引用

cd D:\android-sdk\extras\google\google_play_services\libproject\google-play-services_lib 
android update lib-project -p . -t 1 
ant clean

(3)鏈接 Google Play Services

引用

cd E:\projects\HelloMap 
cd platforms/android/ 
android update project -p . -l ../../../google-play-services_lib

-l 只能使用相對路徑，所以先要把 google-play-services_lib 拷貝到和 HelloMap 同一目錄下。

鏈接成功后 project.properties 文件中：

引用

android.library.reference.2=../../../google-play-services_lib

(4)獲取 fingerpring

引用

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

(5)獲取 API Key

進入 Google APIs Console
打開 APIs & auth > APIs 把 Google Maps Android API v2的狀態(tài)設置成 ON。
進入 APIs & auth > Credentials > CREATE NEW KEY > Android Key > 輸入 SHA1碼+“；”+包名 > Create > 獲取 API Key。

http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/1.1.png" alt="picture1.1" />

（6）安裝 phonegap-googlemaps-plugin

下載 https://github.com/wf9a5m75/phonegap-googlemaps-plugin/archive/master.zip

引用

cordova plugin add E:\plugins\phonegap-googlemaps-plugin-master --variable API_KEY_FOR_ANDROID=<上邊的APIKEY> --variable API_KEY_FOR_IOS=<任意字符>

（7）修改 index.html

Html 代碼

<button id="button" onclick="openGoogleMap();">Init a map</button>
<script type="text/javascript">
    function openGoogleMap() {
      var map = plugin.google.maps.Map.getMap();
      map.addEventListener(plugin.google.maps.event.MAP_READY, function(map) {
        map.showDialog();
      });
    }
</script>

（8）編譯執(zhí)行

引用

cordova build android 
cordova emulate

http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/1.2.png" alt="picture1.2" />

小米等一些國內廠商手機上默認沒有 Google Play Services，所以會出錯：

引用

java.lang.NoClassDefFoundError: com.google.android.gms.R$string

需要先上國內的其他應用商店里下載 Google Play Services。

（9）其他用法

Html 代碼

<button id="button" onclick="openGoogleMap2();">Init a map</button>
<script type="text/javascript">
    function openGoogleMap2() {
      var GOOGLE = new plugin.google.maps.LatLng(39.905841, 116.391596);
      var map = plugin.google.maps.Map.getMap();
      map.addEventListener(plugin.google.maps.event.MAP_READY, function(map) {
        map.showDialog();
        map.addMarker({
          'position': GOOGLE,
          'title': ["Hello Google Map", "for", "Cordova!"].join("\n"),
          'snippet': "This plugin is awesome!"
        }, function(marker) {
          map.animateCamera({
            'target': GOOGLE,
            'zoom': 15
          }, function() {
            marker.showInfoWindow();
          });
        });
      });
    }
</script>

http://wiki.jikexueyuan.com/project/cordova-3.x-Plug-in-article/images/1.3.png" alt="picture1.3" />

標記

Js 代碼

map.addMarker({
  "position": GOOGLE,
  "title": "Hello GoogleMap for Cordova!"
});

Flat 標記

Js 代碼

map.addMarker({
  'position': GOOGLE,
  'flat': true
});

獲取標記（回調函數(shù)）

Js 代碼

map.addMarker({
  "position": GOOGLE,
  "title": "Hello GoogleMap for Cordova!"
}, function(marker) {
  marker.showInfoWindow();
});

替換標記圖標

Js 代碼

map.addMarker({
  'position': GOOGLE,
  'title': 'Google!'
  'icon': 'www/images/google_icon.png'
});
map.addMarker({
  'position': GOOGLE,
  'title': 'Google!',
  'icon': {
    'url': 'www/images/google_icon.png',
    'size': {
      'width': 74,
      'height': 126
    }
  }
});

HTML5/Canvas 動態(tài)標記

Js 代碼

var canvas = document.getElementById("canvas");
map.addMarker({
  'position': GOOGLE,
  'title': canvas.toDataURL(),
  'icon': "data:image/png;base64,iVBORw0KGgoA...",
}, function(marker) {
  marker.showInfoWindow();
});

標記事件

Js 代碼

map.addMarker({
  'position': GOOGLE,
  "title": "Hello Google Maps"
}, function(marker) {
  marker.addEventListener(plugin.google.maps.event.MARKER_CLICK, function() {
    alert("Marker Click");
    marker.showInfoWindow();
  });
  marker.addEventListener(plugin.google.maps.event.INFO_CLICK, function() {
    alert("Info Window Click");
    marker.remove();
  });
});

標記拖拽

Js 代碼

map.addMarker({
  'position': GOOGLE,
  'draggable': true
});

map.addMarker({
  'position': GOOGLE
}, function(marker) {
  marker.setDraggable(true);
});

拖拽事件

Js 代碼

map.addMarker({
  'position': GOOGLE,
  'draggable': true
}, function(marker) {
  marker.addEventListener(plugin.google.maps.event.MARKER_DRAG_END, function(marker) {
    marker.getPosition(function(latLng) {
      marker.setTitle(latLng.toUrlValue());
      marker.showInfoWindow();
    });
  });
});