首頁>編程相關>JAVA源碼
下載

適用於 Android、iOS 和瀏覽器的 Cordova GoogleMaps 外掛程式 v2.7.1

下載建置測試（multiple_maps 分支）

該插件在您的應用程式中顯示 Google 地圖。該插件針對每個平台使用這些函式庫：

  • Android：Google地圖 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：Google地圖 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

展開
附加信息
相關應用
爲您推薦
相關資訊 全部