cordova-plugin-googlemaps, Cordova的谷歌地图 插件

分享于 

13分钟阅读

GitHub

  繁體
phonegap-googlemaps
  • 源代码名称:cordova-plugin-googlemaps
  • 源代码网址:http://www.github.com/mapsplugin/cordova-plugin-googlemaps
  • cordova-plugin-googlemaps源代码文档
  • cordova-plugin-googlemaps源代码下载
  • Git URL:
    git://www.github.com/mapsplugin/cordova-plugin-googlemaps.git
    Git Clone代码到本地:
    git clone http://www.github.com/mapsplugin/cordova-plugin-googlemaps
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mapsplugin/cordova-plugin-googlemaps
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    适用于iOS和安卓( 版本 2.1.1 )的 Cordova

    这个插件是 谷歌地图 Android和谷歌地图 SDK的一个瘦包装。

    Apache都支持。

    快速安装

    稳定 version(npm)

    
    $> cordova plugin add cordova-plugin-googlemaps 
    
    
     --variable API_KEY_FOR_ANDROID="..." 
    
    
     --variable API_KEY_FOR_IOS="..."
    
    
    
    

    开发版本( 当前multiple_maps分支)。

    $> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps 
     --variable API_KEY_FOR_ANDROID="..." 
     --variable API_KEY_FOR_IOS="..."

    如果你安装插件,请先删除插件,然后删除 SDK

    $> cordova plugin rm cordova-plugin-googlemaps
    $> cordova plugin rm com.googlemaps.ios
    $> cordova plugin add cordova-plugin-googlemaps 
     --variable API_KEY_FOR_ANDROID="..." 
     --variable API_KEY_FOR_IOS="..." 
     --no-fetch
    如果你不能重新安装插件,请尝试如下:
    
    $> npm cache clean
    
    
    
    $> cordova platform rm android ios
    
    
    
    //Add the SDK plugin at first with --nofetch option
    
    
    $> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk --nofetch
    
    
    
    $> cordova plugin add cordova-plugin-googlemaps --nofetch
    
    
    
    $> cordova platform add android ios
    
    
    
    

    配置

    你还可以配置以下变量来定制iOS位置plist条目

    • LOCATION_WHEN_IN_USE_DESCRIPTIONNSLocationWhenInUseUsageDescription ( 默认为"在地图上显示你的位置")
    • 用于 NSLocationAlwaysUsageDescription ( 默认值 t"的LOCATION_ALWAYS_USAGE_DESCRIPTION 在地图上跟踪你的位置"

    使用 Cordova CLI的示例

    $> cordova plugin rm cordova-plugin-googlemaps
    $> cordova plugin rm com.googlemaps.ios
    $> cordova plugin add cordova-plugin-googlemaps 
     --variable API_KEY_FOR_ANDROID="..." 
     --variable API_KEY_FOR_IOS="..." 
     --variable LOCATION_WHEN_IN_USE_DESCRIPTION="My custom when in use message" 
     --variable LOCATION_ALWAYS_USAGE_DESCRIPTION="My custom always usage message"

    使用 config.xml的示例

    <pluginname="cordova-plugin-googlemaps"spec="2.0.0">
     <variablename="API_KEY_FOR_ANDROID"value="YOUR_ANDROID_API_KEY_IS_HERE"/>
     <variablename="API_KEY_FOR_IOS"value="YOUR_IOS_API_KEY_IS_HERE"/>
     <variablename="LOCATION_WHEN_IN_USE_DESCRIPTION"value="My custom when in use message"/>
     <variablename="LOCATION_ALWAYS_USAGE_DESCRIPTION"value="My custom always usage message"/>
    </plugin>

    发行说明

    快速演示

    <scripttype="text/javascript">var map;document.addEventListener("deviceready", function() {var div =document.getElementById("map_canvas");// Initialize the map view map =plugin.google.maps.Map.getMap(div);// Wait until the map is ready status.map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);}, false);functiononMapReady() {var button =document.getElementById("button");button.addEventListener("click", onButtonClick);}functiononButtonClick() {// Move to the position with animationmap.animateCamera({ target: {lat:37.422359, lng:-122.084344}, zoom:17, tilt:60, bearing:140, duration:5000 }, function() {// Add a makermap.addMarker({ position: {lat:37.422359, lng:-122.084344}, title:"Welecome to n"+"Cordova GoogleMaps plugin for iOS and Android", snippet:"This plugin is awesome!", animation:plugin.google.maps.Animation.BOUNCE }, function(marker) {// Show the info windowmarker.showInfoWindow();// Catch the click eventmarker.on(plugin.google.maps.event.INFO_CLICK, function() {// To do something...alert("Hello world!"); }); }); });}</script>

    文档

    所有文件在这里

    快速示例


    地图
    var options = {
     camera: {
     target: {lat:.. ., lng:.. .},
     zoom: 19
     }
    };
    var map = plugin.google.maps.Map.getMap(mapDiv, options)

    标记
    map.addMarker({
     position: {lat:.. ., lng:.. .},
     title:"Hello Cordova Google Maps for iOS and Android",
     snippet:"This plugin is awesome!"
    }, function(marker) {.. . })

    MarkerCluster
    map.addMarkerCluster({
    //maxZoomLevel: 5,
     boundsDraw: true,
     markers: dummyData(),
     icons: [
     {min: 2, max: 100, url:"./img/blue.png", anchor: {x: 16, y: 16}},
     {min: 100, max: 1000, url:"./img/yellow.png", anchor: {x: 16, y: 16}},
     {min: 1000, max: 2000, url:"./img/purple.png", anchor: {x: 24, y: 24}},
     {min: 2000, url:"./img/red.png",anchor: {x: 32,y: 32}}
     ]
    }, function(markerCluster) {.. . });

    HtmlInfoWindow
    var html ="<img src='./House-icon.png' width='64' height='64'>" +
    "<br>" +
    "This is an example";
    htmlInfoWindow.setContent(html);
    htmlInfoWindow.open(marker);

    圆形
    map.addCircle({
     'center': {lat:.. ., lng:.. .},
     'radius': 300,
     'strokeColor' : '#AA00FF',
     'strokeWidth': 5,
     'fillColor' : '#880000'
    }, function(circle) {.. . });

    多段线
    map.addPolyline({
     points: AIR_PORTS,
     'color' : '#AA00FF',
     'width': 10,
     'geodesic': true
    }, function(polyline) {.. . });

    多边形
    map.addPolygon({
     'points': GORYOKAKU_POINTS,
     'strokeColor' : '#AA00FF',
     'strokeWidth': 5,
     'fillColor' : '#880000'
    }, function(polygon) {.. . });

    GroundOverlay
    map.addPolygon({
     'points': GORYOKAKU_POINTS,
     'strokeColor' : '#AA00FF',
     'strokeWidth': 5,
     'fillColor' : '#880000'
    }, function(polygon) {.. . });

    TileOverlay
    map.addTileOverlay({
     debug: true,
     opacity: 0.75,
     getTile: function(x, y, zoom) {
     return"../images/map-for-free/" + zoom +"_" + x +"-" + y +".gif"
     }
    }, function(tileOverlay) {.. . });

    编码器
    plugin.google.maps.Geocoder.geocode({
    //US Capital cities
    "address": [
    "Montgomery, AL, USA",.. ."Cheyenne, Wyoming, USA"
     ]
    }, function(mvcArray) {.. . });

    poly 实用程序
    var GORYOKAKU_POINTS = [
     {lat: 41.79883, lng: 140.75675},
    . . .
     {lat: 41.79883, lng: 140.75673}
    ]
    var contain = plugin.google.maps.geometry.poly.containsLocation(
     position, GORYOKAKU_POINTS);
    marker.setIcon(contain?"blue" :"red");

    编码实用程序
    var GORYOKAKU_POINTS = [
     {lat: 41.79883, lng: 140.75675},
    . . .
     {lat: 41.79883, lng: 140.75673}
    ]
    var encodedPath = plugin.google.maps.geometry.
     encoding.encodePath(GORYOKAKU_POINTS);

    球形实用程序
    var heading = plugin.google.maps.geometry.spherical.computeHeading(
     markerA.getPosition(), markerB.getPosition());
    label.innerText ="heading :" + heading.toFixed(0) +"°";

    : 谷歌地图 JavaScript的区别有多大?

    这个插件显示原生( Java和 objective-c ) 特性的映射视图,它比 JavaScript API要快磅。

    本机地图视图即使设备脱机工作也能正常工作。

    这个插件提供了JS开发者的本地地图视图的特性。

    你可以在 谷歌地图 JavaScript中编写代码 similar like

    功能比较表

    谷歌地图 JavaScript API Cordova-Plugin-GoogleMaps
    渲染系统JavaScript + HTMLJavaScript + 原生 api
    脱机映射不可能可能( 仅显示区域)
    三维视图不可能可能
    平台所有浏览器仅适用于Android和iOS应用
    平铺图像位图矢量

    比较表比较表

    谷歌地图 JavaScript API Cordova-Plugin-GoogleMaps
    google.maps.Map地图
    google.maps.Marker标记
    google.maps.InfoWindow默认InfoWindow和 HtmlInfoWindow
    google.maps.Circle圆圈
    google.maps.Rectangle多边形
    google.maps.Polyline多段线
    google.maps.Polygon多边形
    google.maps.GroundOverlayGroundOverlay
    google.maps.ImageMapTypeTileOverlay
    google.maps.MVCObjectBaseClass
    google.maps.MVCArrayBaseArrayClass
    google.maps.Geocoderplugin.google.maps.geocoder
    google.maps.geometry.sphericalplugin.google.maps.geometry.spherical
    google.maps.geometry.encodingplugin.google.maps.geometry.encoding
    google.maps.geometry.polyplugin.google.maps.geometry.poly
    ( 不可用)MarkerCluster
    google.maps.KmlLayerKMLLayer ( v1.4.5可用)
    google.maps.StreetView( 不可用)
    google.maps.Data( 不可用)
    google.maps.DirectionsService( 不可用)
    google.maps.DistanceMatrixService( 不可用)
    google.maps.FusionTablesLayer( 不可用)
    google.maps.TransitLayer( 不可用)
    google。maps。places。*( 不可用)
    google。visualization。*( 不可用)

    :这个插件是如何工作的

    这个插件生成本机地图视图,并在浏览器

    映射视图不是HTML元素。 这意味着它们不是 <div> 或者别的东西。 但是,你可以使用 <div> 指定地图视图的大小和位置。

    这里插件将 background 更改为应用程序的transparent。 然后插件检测你的手指点击的位置: native map 或者 html element

    这个插件的好处是能够检测到哪些HTML元素在地图上,或者是否自动地。

    在 below 图像中,点击 header div,它位于地图视图之上。 这个插件检测你的tap是为 header div或者地图视图,然后传递鼠标事件。

    这意味着你可以使用类似于HTML元素的本机视图。

    官方社区

    给我Buy啤酒

    如果你捐赠这个按钮帮助这个项目,我们感激你。

    Donate

    捐赠金额用于购买测试机器( 比如 iPhone,安卓) 或者新软件。

    给我买啤酒( 比特币)

    感谢你通过比特币支持我们。

    3LyVAfANZwcitEEnFbsHup3mDJfuqp8QFb


    相关文章