插件地址: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" />
小米等一些國內(nèi)廠商手機上默認沒有 Google Play Services,所以會出錯:
引用
java.lang.NoClassDefFoundError: com.google.android.gms.R$string
需要先上國內(nèi)的其他應用商店里下載 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
});
獲取標記(回調(diào)函數(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();
});
});
});