欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Cordova 3.x 实用插件(1) -- Google地图Maps

程序员文章站 2022-05-15 11:35:25
...
插件地址: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。
Cordova 3.x 实用插件(1) -- Google地图Maps
            
    
    博客分类: Cordova CordovaPhoneGap

(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

Cordova 3.x 实用插件(1) -- Google地图Maps
            
    
    博客分类: Cordova CordovaPhoneGap

小米等一些国内厂商手机上默认没有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>

Cordova 3.x 实用插件(1) -- Google地图Maps
            
    
    博客分类: Cordova CordovaPhoneGap

标记
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();
    });
  });
});
  • Cordova 3.x 实用插件(1) -- Google地图Maps
            
    
    博客分类: Cordova CordovaPhoneGap
  • 大小: 58.4 KB
  • Cordova 3.x 实用插件(1) -- Google地图Maps
            
    
    博客分类: Cordova CordovaPhoneGap
  • 大小: 144.5 KB
  • Cordova 3.x 实用插件(1) -- Google地图Maps
            
    
    博客分类: Cordova CordovaPhoneGap
  • 大小: 130.8 KB
  • www.rar (25.3 KB)
  • 下载次数: 49
相关标签: Cordova PhoneGap