插件地址:
https://github.com/wf9a5m75/phonegap-googlemaps-plugin/
(1)创建工程
引用
cordova create HelloMap com.rensanning.cordova HelloMap
cd HelloMap
cordova platform add android
(2)创建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的状态设置成ON。
进入APIs & auth > Credentials > CREATE NEW KEY > Android Key > 输入SHA1码+“;”+包名 > Create > 获取API Key。
(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
<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)编译执行
引用
cordova build android
cordova emulate
小米等一些国内厂商手机上默认没有Google Play Services,所以会出错:
引用
java.lang.NoClassDefFoundError: com.google.android.gms.R$string
需要先上国内的其他应用商店里下载Google Play Services。
(9)其他用法
<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>
标记
map.addMarker({
"position": GOOGLE,
"title": "Hello GoogleMap for Cordova!"
});
Flat标记
map.addMarker({
'position': GOOGLE,
'flat': true
});
获取标记(回调函数)
map.addMarker({
"position": GOOGLE,
"title": "Hello GoogleMap for Cordova!"
}, function(marker) {
marker.showInfoWindow();
});
替换标记图标
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动态标记
var canvas = document.getElementById("canvas");
map.addMarker({
'position': GOOGLE,
'title': canvas.toDataURL(),
'icon': "data:image/png;base64,iVBORw0KGgoA...",
}, function(marker) {
marker.showInfoWindow();
});
标记事件
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();
});
});
标记拖拽
map.addMarker({
'position': GOOGLE,
'draggable': true
});
map.addMarker({
'position': GOOGLE
}, function(marker) {
marker.setDraggable(true);
});
拖拽事件
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();
});
});
});
- 大小: 58.4 KB
- 大小: 144.5 KB
- 大小: 130.8 KB
分享到:
相关推荐
适用于Android,iOS和浏览器的Cordova GoogleMaps插件v2.7.1 下载 生成测试(multiple_maps分支) 此插件在您的应用程序中显示Google Maps。 该插件为每个平台使用以下库: Android: iOS: 浏览器: 和均受...
@ ionic-native / google-maps插件是用于Ionic框架的的包装器插件。 Ionic Native将插件回调包装在Promise或Observable中,为所有插件提供通用接口,并使其易于使用带有Angular更改检测的插件。 安装 首先,您需要...
Cordova_Maps 适用于浏览器,IOS和android的Cordova Maps应用程序 1:创建Cordova项目 cordova create GMapExample com.labs.gmapexample GMapExample 2:更改工作目录 cd GMapExample 3:添加地理位置插件 ...
使用带有Ionic Framework的Google Maps插件的示例工作应用程序。 您必须添加自己的Google API密钥才能使代码正常工作。 编辑“ plugins \ android.json”文件。 在底部附近,有2个地方需要用API密钥替换“ {...
在 iOS 上使用Apple Maps ,在 Android 上使用Google Maps v2 目前仅在 Android 和 iOS 上工作/测试。 需要 Cordova 3.0+(未经修改将无法在早期版本上运行)。 安卓专用 您需要来自 google 的 ,并且需要在安装...
混合应用-Google Maps 有了这个程序,您可以获得设备的当前位置。 该项目使用HTML,CSS,JavaScript技术以及可访问设备的Cordova插件。 项目图片:
这只是一个示例,请购买完整的源代码。 全面支持Android和IOS。 这包括乘客应用程序,驾驶员应用程序和Web管理仪表板。 :television: :envelope: 电子邮件以获取更多查询。 Skype :telephone: +23407089930308 ...
如何使用此模板要使用此功能,请使用ionic node.js实用工具创建一个新的ionic项目,或将其复制并粘贴到现有的Cordova项目中。 使用Ionic Framework并非默认方法;)。 或者使用来自离子市场中的文件:这是一个干净的...
移动应用评估 对“自动完成”案例进行了评估,用户可以搜索街道,车站,... 使用Ionic Framework,AngularJS,Angular-UI-Router,Cordova GeoLocation插件和Google Maps API制作的移动应用程序 作者:Cengiz Ulusoy
离子发生器入门应用 这是一个Ionic入门应用程序,旨在为您提供示例和初始代码以构建您自己...Cordova插件用法示例(设备信息,通知插件,条形码阅读器插件) Google Maps整合 许多离子用户控件的示例 捕获 主菜单 !
组件包括离子,cordova插件,Google Maps地理编码API和Forecast.io API。 用法 Git克隆'URL' cd进入目录 npm安装和bower安装 对于浏览器:3.离子服务 适用于andoird的用法:3. ionic平台添加android 4. ionic构建...