插件地址:[url=https://github.com/wf9a5m75/phonegap-googlemaps-plugin/]https://github.com/wf9a5m75/phonegap-googlemaps-plugin/[/url]
[b](1)创建工程[/b]
[quote]cordova create HelloMap com.rensanning.cordova HelloMap
cd HelloMap
cordova platform add android[/quote]
[b](2)创建Google Play Services的lib[/b]
[quote]cd D:\android-sdk\extras\google\google_play_services\libproject\google-play-services_lib
android update lib-project -p . -t 1
ant clean[/quote]
[b](3)链接Google Play Services[/b]
[quote]cd E:\projects\HelloMap
cd platforms/android/
android update project -p . -l ../../../google-play-services_lib[/quote]
[color=red]-l 只能使用相对路径,所以先要把google-play-services_lib拷贝到和HelloMap同一目录下。[/color]
链接成功后project.properties文件中:
[quote]android.library.reference.2=../../../google-play-services_lib[/quote]
[b](4)获取fingerpring[/b]
[quote]keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android[/quote]
[b](5)获取API Key[/b]
进入[url=https://code.google.com/apis/console/]Google APIs Console[/url]
打开APIs & auth > APIs 把 Google Maps Android API v2的状态设置成ON。
进入APIs & auth > Credentials > CREATE NEW KEY > Android Key > 输入SHA1码+“;”+包名 > Create > 获取API Key。
[img]http://dl2.iteye.com/upload/attachment/0095/0106/ecc3e4e9-5d3d-36ea-8405-736bee030528.png[/img]
[b](6)安装phonegap-googlemaps-plugin[/b]
下载[url=https://github.com/wf9a5m75/phonegap-googlemaps-plugin/archive/master.zip]https://github.com/wf9a5m75/phonegap-googlemaps-plugin/archive/master.zip[/url]
[quote]cordova plugin add E:\plugins\phonegap-googlemaps-plugin-master --variable API_KEY_FOR_ANDROID=<上边的APIKEY> --variable API_KEY_FOR_IOS=<任意字符>[/quote]
[b](7)修改index.html[/b]
[b](8)编译执行[/b]
[quote]cordova build android
cordova emulate[/quote]
[img]http://dl2.iteye.com/upload/attachment/0095/0108/4eb8447f-3100-3edb-9a10-b67374310da0.png[/img]
小米等一些国内厂商手机上默认没有Google Play Services,所以会出错:
[quote]java.lang.NoClassDefFoundError: com.google.android.gms.R$string[/quote]
需要先上国内的其他应用商店里下载Google Play Services。
[b](9)其他用法[/b]
[img]http://dl2.iteye.com/upload/attachment/0095/0110/7786368c-49c0-34e6-b2ce-73e3de95869c.png[/img]
[b]标记[/b]
[b]Flat标记[/b]
[b]获取标记(回调函数)[/b]
[b]替换标记图标[/b]
[b]HTML5/Canvas动态标记[/b]
[b]标记事件[/b]
[b]标记拖拽[/b]
[b]拖拽事件[/b]
[b](1)创建工程[/b]
[quote]cordova create HelloMap com.rensanning.cordova HelloMap
cd HelloMap
cordova platform add android[/quote]
[b](2)创建Google Play Services的lib[/b]
[quote]cd D:\android-sdk\extras\google\google_play_services\libproject\google-play-services_lib
android update lib-project -p . -t 1
ant clean[/quote]
[b](3)链接Google Play Services[/b]
[quote]cd E:\projects\HelloMap
cd platforms/android/
android update project -p . -l ../../../google-play-services_lib[/quote]
[color=red]-l 只能使用相对路径,所以先要把google-play-services_lib拷贝到和HelloMap同一目录下。[/color]
链接成功后project.properties文件中:
[quote]android.library.reference.2=../../../google-play-services_lib[/quote]
[b](4)获取fingerpring[/b]
[quote]keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android[/quote]
[b](5)获取API Key[/b]
进入[url=https://code.google.com/apis/console/]Google APIs Console[/url]
打开APIs & auth > APIs 把 Google Maps Android API v2的状态设置成ON。
进入APIs & auth > Credentials > CREATE NEW KEY > Android Key > 输入SHA1码+“;”+包名 > Create > 获取API Key。
[img]http://dl2.iteye.com/upload/attachment/0095/0106/ecc3e4e9-5d3d-36ea-8405-736bee030528.png[/img]
[b](6)安装phonegap-googlemaps-plugin[/b]
下载[url=https://github.com/wf9a5m75/phonegap-googlemaps-plugin/archive/master.zip]https://github.com/wf9a5m75/phonegap-googlemaps-plugin/archive/master.zip[/url]
[quote]cordova plugin add E:\plugins\phonegap-googlemaps-plugin-master --variable API_KEY_FOR_ANDROID=<上边的APIKEY> --variable API_KEY_FOR_IOS=<任意字符>[/quote]
[b](7)修改index.html[/b]
<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>
[b](8)编译执行[/b]
[quote]cordova build android
cordova emulate[/quote]
[img]http://dl2.iteye.com/upload/attachment/0095/0108/4eb8447f-3100-3edb-9a10-b67374310da0.png[/img]
小米等一些国内厂商手机上默认没有Google Play Services,所以会出错:
[quote]java.lang.NoClassDefFoundError: com.google.android.gms.R$string[/quote]
需要先上国内的其他应用商店里下载Google Play Services。
[b](9)其他用法[/b]
<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>
[img]http://dl2.iteye.com/upload/attachment/0095/0110/7786368c-49c0-34e6-b2ce-73e3de95869c.png[/img]
[b]标记[/b]
map.addMarker({
"position": GOOGLE,
"title": "Hello GoogleMap for Cordova!"
});
[b]Flat标记[/b]
map.addMarker({
'position': GOOGLE,
'flat': true
});
[b]获取标记(回调函数)[/b]
map.addMarker({
"position": GOOGLE,
"title": "Hello GoogleMap for Cordova!"
}, function(marker) {
marker.showInfoWindow();
});
[b]替换标记图标[/b]
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
}
}
});
[b]HTML5/Canvas动态标记[/b]
var canvas = document.getElementById("canvas");
map.addMarker({
'position': GOOGLE,
'title': canvas.toDataURL(),
'icon': "data:image/png;base64,iVBORw0KGgoA...",
}, function(marker) {
marker.showInfoWindow();
});
[b]标记事件[/b]
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();
});
});
[b]标记拖拽[/b]
map.addMarker({
'position': GOOGLE,
'draggable': true
});
map.addMarker({
'position': GOOGLE
}, function(marker) {
marker.setDraggable(true);
});
[b]拖拽事件[/b]
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();
});
});
});