首页>编程相关>JAVA源码
下载

适用于 Android、iOS 和浏览器的 Cordova GoogleMaps 插件 v2.7.1

下载构建测试（multiple_maps 分支）

该插件在您的应用程序中显示 Google 地图。该插件针对每个平台使用这些库：

  • Android：谷歌地图 Android API
  • iOS：适用于 iOS 的 Google 地图 SDK
  • 浏览器：Google 地图 JavaScript API v3

PhoneGap 和 Apache Cordova 均受支持。

安卓、iOS

浏览器

指南

  • 如何生成API密钥？
  • 你好世界
  • 你好，世界（使用 PhoneGap Build）
  • 故障排除

快速安装

 $> cordova plugin add cordova-plugin-googlemaps

然后将 Google 地图 API 密钥设置到config.xml (Android / iOS) 中。 

< widget ...>
  < preference name = " GOOGLE_MAPS_ANDROID_API_KEY " value = " (api key) " />
  < preference name = " GOOGLE_MAPS_IOS_API_KEY " value = " (api key) " />
</ widget >

对于浏览器平台来说， 

 // If your app runs this program on browser,
// you need to set `API_KEY_FOR_BROWSER_RELEASE` and `API_KEY_FOR_BROWSER_DEBUG`
// before `plugin.google.maps.Map.getMap()`
//
//   API_KEY_FOR_BROWSER_RELEASE for `https:` protocol
//   API_KEY_FOR_BROWSER_DEBUG for `http:` protocol
//
plugin . google . maps . environment . setEnv ( {
  'API_KEY_FOR_BROWSER_RELEASE' : '(YOUR_API_KEY_IS_HERE)' ,
  'API_KEY_FOR_BROWSER_DEBUG' : ''  // optional
} ) ;

// Create a Google Maps native view under the map_canvas div.
var map = plugin . google . maps . Map . getMap ( div ) ;

PhoneGap 构建设置

< widget ...>

  <!--
    You need to specify cli-7.1.0 or greater version.
    https://build.phonegap.com/current-support
  -->
  < preference name = " phonegap-version " value = " cli-8.1.1 " />
</ widget >

安装可选变量（config.xml）

  • GOOGLE_MAPS_PLAY_SERVICES_VERSION = (16.0.1)
    Google Play 服务 SDK 版本。您需要指定与所有其他插件相同的版本号。在这里查看最新版本。

  • ANDROID_SUPPORT_V4_VERSION = (27.1.1)
    该插件需要 Android 支持库 v4。最低版本为 24.1.0。在这里查看最新版本。

  • LOCATION_WHEN_IN_USE_DESCRIPTION
    当您的应用程序仅在必要的时间内请求位置权限时，会显示此消息。

  • LOCATION_ALWAYS_USAGE_DESCRIPTION
    当您的应用程序始终请求位置权限时，将显示此消息。

请支持此插件活动。

为了保持这个插件免费，请考虑为这个项目捐赠少量资金。

发行说明

  • v2.7.1

    • 修复：(iOS) v2.7.0 中存在 UiWebView 引用

  • v2.7.0

    • 重新采用：cordova-plugin-googlemaps-sdk 依赖项
    • 重要更新：不再支持 iOS 上的UIWebView 。仅限WKWebView 。
    • 修复：(iOS) 无法在 ionic 4 / 5 上从本地主机加载图像文件
    • 更新：（Android）防止 AsyncLoadImage.java 中的空指针错误
    • 修复：调用setDiv且有push/pop页面时CSS动画干扰
    • 修复：（Android/iOS/浏览器）KML 解析器崩溃
    • 修复：某些 DOM 元素的闪烁和错误渲染
    • 添加： map.stopAnimation()
    • 修复：map.animateCamera() 运行时无法删除地图
    • 更新：（Android）增加缓存大小
    • 更新：（Android/iOS）丹麦语本地化
    • 修复：（Android）在map.setDiv(null)之后防止调整大小事件
    • 修复：（Android/iOS）无法与里面的地图交互
    • 修复：jslint 错误
    • 修复：marker.setIcon 崩溃
    • 更新：将默认值范围设置为航向和倾斜
    • 修复：（Android/iOS）点击后退按钮很快后触摸检测错误。
    • 修复：点击标记簇的标记时出现错误#2660
    • 删除promise-7.0.4-min.js.map
    • 修复：（iOS）错误修复：如果“bearing”属性为“”，应用程序崩溃
    • 修复：HTMLColor2RGBA() 转换为不正确的值
    • 修复：（Android）无法从互联网加载标记图像
    • 许多错误修复...

演示

演示（浏览器）

文档

所有的文档都在这里！！

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md

快速示例


地图
变量选项= {
  相机： {
    目标：{纬度：...，经度：...}，
    变焦：19
  }
};
var map = plugin.google.maps.Map.getMap(mapDiv, 选项)

标记
var 标记 = map.addMarker({
  位置：{纬度：...，经度：...}，
  标题：“Hello Cordova Google Maps for iOS and Android”，
  片段：“这个插件太棒了！”
})

标记簇
var markerCluster = map.addMarkerCluster({
  //最大缩放级别: 5,
  边界绘制：真，
  标记：dummyData(),
  图标：[
      {最小值：2，最大值：100，网址：“./img/blue.png”，锚点：{x：16，y：16}}，
      {最小值：100，最大值：1000，网址：“./img/yellow.png”，锚点：{x：16，y：16}}，
      {最小值：1000，最大值：2000，网址：“./img/purple.png”，锚点：{x：24，y：24}}，
      {分钟：2000，网址：“./img/red.png”，锚点：{x：32，y：32}}
  ]
});

HTML信息窗口
var html = "<img src='./House-icon.png' width='64' height='64' >" +
           “<br>”+
           “这是一个例子”；
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(标记);

圆圈
var 圆 = map.addCircle({
  'center': {纬度: ..., 经度: ...},
  “半径”：300，
  '描边颜色': '#AA00FF',
  '笔划宽度'：5，
  '填充颜色': '#880000'
});

折线
var 折线 = map.addPolyline({
  点：AIR_PORTS，
  “颜色”：“#AA00FF”，
  “宽度”：10，
  “测地线”：正确
});

多边形
var 多边形 = map.addPolygon({
  '点': 五棱角_POINTS,
  '描边颜色': '#AA00FF',
  '笔划宽度'：5，
  '填充颜色': '#880000'
});

地面叠加层
var groundOverlay = map.addGroundOverlay({
  'url': "./newark_nj_1922.jpg",
  “界限”：[
    {“纬度”：40.712216，“经度”：-74.22655}，
    {“纬度”：40.773941，“经度”：-74.12544}
  ],
  “不透明度”：0.5
});

平铺叠加
vartileOverlay = map.addTileOverlay({
  调试：正确，
  不透明度：0.75，
  getTile: 函数(x, y, 缩放) {
    返回“../images/map-for-free/”+缩放+“_”+x+“-”+y+“.gif”
  }
});

公里叠加
地图.addKmlOverlay({
  'url': '多边形.kml'
}, 函数(kmlOverlay) { ... });

地理编码器
插件.google.maps.Geocoder.geocode({
  // 美国首都城市
  “地址”： [
    “美国阿拉巴马州蒙哥马利”，...“美国怀俄明州夏安”
  ]
}, 函数(mvcArray) { ... });

多效用
var GORYOKAKU_POINTS = [
  {纬度：41.79883，经纬度：140.75675}，
  ...
  {纬度：41.79883，经纬度：140.75673}
]
var contains =plugin.google.maps.geometry.poly.containsLocation(
                    位置，GORYOKAKU_POINTS);
marker.setIcon（包含？“蓝色”：“红色”）；

编码实用程序
var GORYOKAKU_POINTS = [
  {纬度：41.79883，经纬度：140.75675}，
  ...
  {纬度：41.79883，经纬度：140.75673}
]
var编码路径=plugin.google.maps.geometry。
                       编码.encodePath(GORYOKAKU_POINTS);

球形效用
var 标题 =plugin.google.maps.geometry.spherical.computeHeading(
                        标记A.getPosition(),标记B.getPosition());
label.innerText = "标题:" + header.toFixed(0) + "°";

定位服务
plugin.google.maps.LocationService.getMyLocation(函数(结果) {
  Alert(["您当前位置：n",
      "纬度:" + location.latLng.lat.toFixed(3),
      "经度：" + location.latLng.lng.toFixed(3),
      “速度：”+位置.速度，
      “时间：”+地点.时间，
      "方位：" + location.bearing].join("n"));
});

街景
var div = document.getElementById("pano_canvas1");
var 全景 = plugin.google.maps.StreetView.getPanorama(div, {
  相机： {
    目标：{纬度：42.345573，经纬度：-71.098326}
  }
});

此插件和 Google Maps JavaScript API v3 有什么区别？

Google Maps JavaScript API v3 可在任何平台上运行，但如果设备处于离线状态，则无法运行。

该插件使用三个不同的 API：

  • Android：谷歌地图 Android API
  • iOS：适用于 iOS 的 Google 地图 SDK
  • 浏览器：Google 地图 JavaScript API v3

在 Android 和 iOS 应用程序中，此插件显示本机 Google 地图视图，这比 Google Maps JavaScript API v3更快。即使设备离线也能正常工作。

在浏览器平台中，该插件显示 JS 地图视图（Google Maps JavaScript API v3）。它应该作为 PWA（渐进式 Web 应用程序）工作，但设备必须在线。

为了适用于所有平台，该插件提供了自己的 API，而不是每个原始 API。您可以编写similar to Google Maps JavaScript API v3 的代码。

功能比较表

Google 地图 JavaScript API v3 Cordova-插件-GoogleMaps(Android,iOS) Cordova-插件-GoogleMaps(浏览器)
渲染系统JavaScript + HTML JavaScript + 本机 API JavaScript
离线地图不可能可能（仅限您显示的区域）不可能
3D视图不可能可能的不可能
平台所有浏览器仅限 Android 和 iOS 应用程序所有浏览器
平铺图像位图向量位图

类别对照表

Google 地图 JavaScript API v3 Cordova-插件-GoogleMaps
google.maps. 地图地图
google.maps.Marker标记
google.maps.InfoWindow默认 InfoWindow 和 HtmlInfoWindow
google.maps.Circle圆圈
google.maps.矩形多边形
google.maps.折线折线
google.maps.多边形多边形
google.maps.GroundOverlay地面叠加层
google.maps.ImageMapType平铺叠加
google.maps.MVCObject基类
google.maps.MVCArray基本数组类
谷歌地图地理编码器插件.google.maps.geocoder
google.maps.geometry.spherical plugin.google.maps.geometry.spherical
google.maps.geometry.encoding插件.google.maps.geometry.encoding
google.maps.geometry.poly插件.google.maps.geometry.poly
（无法使用）标记簇
google.maps.KmlLayer公里叠加
（无法使用）定位服务
谷歌地图街景街景
谷歌地图数据（无法使用）
google.maps.DirectionsService （无法使用）
google.maps.DistanceMatrixService （无法使用）
google.maps.TransitLayer （无法使用）
google.maps.places.* （无法使用）
谷歌.地图.可视化。* （无法使用）

这个插件如何工作（Android、iOS）？

该插件生成原生地图视图，并将它们放在浏览器下。

地图视图不是 HTML 元素。这意味着它们不是<div>或任何与 HTML 相关的内容。但是您可以使用其包含的<div>指定地图视图的大小和位置。

该插件将应用程序中的背景更改为transparent 。然后插件会检测您的触摸位置，该位置要么是针对native map ，要么是html element （可以位于地图顶部，也可以位于屏幕上的任何其他位置）。

该插件的好处是能够自动检测哪些 HTML 元素位于地图上或不在地图上。

例如，在下图中，假设您点击标题 div（位于地图视图上方）。该插件将检测您的点击是针对标题 div 还是针对地图视图，然后适当地传递触摸事件。

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

官方社区

  • Gitter：（由@Hirbod 管理）

    https://gitter.im/nightstomp/cordova-plugin-googlemaps

展开
附加信息
相关应用
为您推荐
相关资讯 全部