cordova plugin googlemaps
Version 1.3.9
| Unduh | Uji build (cabang multiple_maps) |
|---|---|
Plugin ini menampilkan Google Maps di aplikasi Anda. Plugin ini menggunakan perpustakaan berikut untuk setiap platform:
PhoneGap dan Apache Cordova keduanya didukung.
Android, iOS | Peramban |
$> cordova plugin add cordova-plugin-googlemaps
Kemudian atur kunci Google Maps API Anda ke config.xml Anda (Android / iOS).
< widget ...>
< preference name = " GOOGLE_MAPS_ANDROID_API_KEY " value = " (api key) " />
< preference name = " GOOGLE_MAPS_IOS_API_KEY " value = " (api key) " />
</ widget >Untuk platform peramban,
// 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 ) ; < 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 > GOOGLE_MAPS_PLAY_SERVICES_VERSION = (16.0.1)
Versi SDK Layanan Google Play. Anda perlu menentukan nomor versi yang sama dengan semua plugin lainnya. Lihat versi terbaru di sini.
ANDROID_SUPPORT_V4_VERSION = (27.1.1)
Plugin ini memerlukan perpustakaan dukungan Android v4. Versi minimumnya adalah 24.1.0. Lihat versi terbaru di sini.
LOCATION_WHEN_IN_USE_DESCRIPTION
Pesan ini ditampilkan ketika aplikasi Anda meminta IZIN LOKASI hanya pada waktu yang diperlukan .
LOCATION_ALWAYS_USAGE_DESCRIPTION
Pesan ini ditampilkan ketika aplikasi Anda meminta IZIN LOKASI untuk selalu .
Agar plugin ini tetap gratis, mohon pertimbangkan untuk menyumbangkan sedikit uang untuk proyek ini.
v2.7.1
v2.7.0
UIWebView di iOS. Hanya WKWebView saja.map.stopAnimation()map.setDiv(null)Demo (Peramban)
Semua dokumentasi ada di sini!!
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md
Contoh cepat
 Peta | opsi var = {
kamera: {
sasaran: {lat: ..., lng: ...},
perbesar: 19
}
};
var map = plugin.google.maps.Map.getMap(mapDiv, opsi) |
 Penanda | var penanda = peta.addMarker({
posisi: {lat: ..., lng: ...},
judul: "Halo Cordova Google Maps untuk iOS dan Android",
cuplikan: "Plugin ini luar biasa!"
}) |
 Cluster Penanda | var markerCluster = peta.addMarkerCluster({
//tingkatZoom maks: 5,
batasDraw: benar,
penanda: dummyData(),
ikon: [
{min: 2, maks: 100, url: "./img/blue.png", jangkar: {x: 16, y: 16}},
{min: 100, maks: 1000, url: "./img/kuning.png", jangkar: {x: 16, y: 16}},
{min: 1000, maks: 2000, url: "./img/purple.png", jangkar: {x: 24, y: 24}},
{min: 2000, url: "./img/red.png",jangkar: {x: 32,y: 32}}
]
}); |
 HtmlInfoWindow | var html = "<img src='./House-icon.png' lebar='64' tinggi='64' >" +
"<br>" +
"Ini adalah sebuah contoh";
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(penanda);
|
 Lingkaran | var lingkaran = peta.addCircle({
'tengah': {lat: ..., lng: ...},
'radius': 300,
'warna guratan' : '#AA00FF',
'Lebar pukulan': 5,
'isiWarna' : '#880000'
}); |
 garis poli | var polyline = peta.addPolyline({
poin: AIR_PORTS,
'warna' : '#AA00FF',
'lebar': 10,
'geodesik': benar
}); |
 Poligon | var poligon = peta.tambahkanPoligon({
'poin': GORYOKAKU_POINTS,
'warna guratan' : '#AA00FF',
'Lebar pukulan': 5,
'isiWarna' : '#880000'
}); |
 Hamparan Tanah | var groundOverlay = peta.addGroundOverlay({
'url': "./newark_nj_1922.jpg",
'batas': [
{"lat": 40.712216, "lng": -74.22655},
{"lat": 40.773941, "lng": -74.12544}
],
'opasitas': 0,5
});
|
 Hamparan Ubin | var tileOverlay = peta.addTileOverlay({
men-debug: benar,
opacity: 0,75,
getTile: fungsi(x, y, zoom) {
kembalikan "../images/map-for-free/" + zoom + "_" + x + "-" + y + ".gif"
}
}); |
 KmlHamparan | peta.addKmlOverlay({
'url': 'poligon.kml'
}, fungsi(kmlOverlay) { ... }); |
 Geocoder | plugin.google.maps.Geocoder.geocode({
// Ibu kota AS
"alamat": [
"Montgomery, AL, AS", ... "Cheyenne, Wyoming, AS"
]
}, fungsi(mvcArray) { ... }); |
 utilitas poli | var GORYOKAKU_POINTS = [
{lat: 41.79883, panjang: 140.75675},
...
{lat: 41.79883, panjang: 140.75673}
]
var berisi = plugin.google.maps.geometry.poly.containsLocation(
posisi, GORYOKAKU_POINTS);
marker.setIcon(berisi ? "biru" : "merah");
|
 menyandikan utilitas | var GORYOKAKU_POINTS = [
{lat: 41.79883, panjang: 140.75675},
...
{lat: 41.79883, panjang: 140.75673}
]
var encodedPath = plugin.google.maps.geometry.
pengkodean.encodePath(GORYOKAKU_POINTS);
|
 utilitas bola | var heading = plugin.google.maps.geometry.spherical.computeHeading(
markerA.getPosition(), markerB.getPosition());
label.innerText = "pos : " + pos.toFixed(0) + "°";
|
 Layanan lokasi | plugin.google.maps.LocationService.getMyLocation(fungsi(hasil) {
alert(["Lokasi Anda saat ini:n",
"garis lintang:" + lokasi.latLng.lat.toFixed(3),
"bujur:" + lokasi.latLng.lng.toFixed(3),
"kecepatan:" + lokasi.kecepatan,
"waktu:" + lokasi.waktu,
"bantalan:" + lokasi.bantalan].join("n"));
});
|
 Tampilan Jalan | var div = dokumen.getElementById("pano_canvas1");
var panorama = plugin.google.maps.StreetView.getPanorama(div, {
kamera: {
sasaran: {lat: 42.345573, panjang: -71.098326}
}
}); |
Google Maps JavaScript API v3 berfungsi pada platform apa pun, namun tidak berfungsi jika perangkat sedang offline .
Plugin ini menggunakan tiga API berbeda:
Pada aplikasi Android dan iOS, plugin ini menampilkan tampilan asli Google Maps, yang lebih cepat dibandingkan Google Maps JavaScript API v3. Dan bahkan berfungsi jika perangkat sedang offline .
Di platform Browser, plugin ini menampilkan tampilan peta JS (Google Maps JavaScript API v3). Ini harus berfungsi sebagai PWA (aplikasi web progresif), tetapi perangkat harus online .
Agar dapat berfungsi di semua platform, plugin ini menyediakan API sendiri, bukan setiap API asli. Anda dapat menulis kode Anda similar to Google Maps JavaScript API v3.
Tabel perbandingan fitur
| API JavaScript Google Maps v3 | Cordova-Plugin-GoogleMaps(Android,iOS) | Cordova-Plugin-GoogleMaps (Peramban) | |
|---|---|---|---|
| Sistem rendering | JavaScript + HTML | JavaScript + API Asli | JavaScript |
| Peta luar talian | Tidak mungkin | Mungkin (hanya area yang Anda tampilkan) | Tidak mungkin |
| Tampilan 3D | Tidak mungkin | Mungkin | Tidak mungkin |
| Platform | Semua browser | Hanya aplikasi Android dan iOS | Semua browser |
| Gambar ubin | peta bit | Vektor | peta bit |
Tabel perbandingan kelas
| API JavaScript Google Maps v3 | Cordova-Plugin-GoogleMaps |
|---|---|
| google.maps.Map | Peta |
| google.maps.Marker | Penanda |
| google.maps.InfoWindow | InfoWindow Default, dan HtmlInfoWindow |
| google.maps.Lingkaran | Lingkaran |
| google.maps.Persegi Panjang | Poligon |
| google.maps.Polyline | garis poli |
| google.maps.Poligon | Poligon |
| google.maps.GroundOverlay | Hamparan Tanah |
| google.maps.ImageMapType | Hamparan Ubin |
| google.maps.MVCObject | Kelas Dasar |
| google.maps.MVCArray | Kelas BaseArray |
| google.maps.Geocoder | plugin.google.maps.geocoder |
| google.maps.geometry.spherical | plugin.google.maps.geometry.spherical |
| google.maps.geometry.encoding | plugin.google.maps.geometry.encoding |
| google.maps.geometry.poly | plugin.google.maps.geometry.poly |
| (tidak tersedia) | Cluster Penanda |
| google.maps.KmlLayer | KmlHamparan |
| (tidak tersedia) | Layanan Lokasi |
| google.maps.StreetView | Tampilan Jalan |
| google.maps.Data | (tidak tersedia) |
| google.maps.DirectionsService | (tidak tersedia) |
| google.maps.DistanceMatrixService | (tidak tersedia) |
| google.maps.TransitLayer | (tidak tersedia) |
| google.maps.tempat.* | (tidak tersedia) |
| google.maps.visualisasi.* | (tidak tersedia) |
Plugin ini menghasilkan tampilan peta asli, dan menempatkannya di bawah browser .
Tampilan peta bukan elemen HTML. Ini berarti bahwa mereka bukan <div> atau apapun yang berhubungan dengan HTML. Namun Anda dapat menentukan ukuran dan posisi tampilan peta menggunakan <div> yang memuatnya.
Plugin ini mengubah background menjadi transparent pada aplikasi Anda. Kemudian plugin mendeteksi posisi sentuhan Anda, yang dimaksudkan untuk native map atau html element (yang bisa berada di atas peta Anda, atau di mana saja di layar).
Keunggulan plugin ini adalah kemampuannya untuk secara otomatis mendeteksi elemen HTML mana yang berada di atas peta atau tidak.
Misalnya, pada gambar di bawah, katakanlah Anda mengetuk div header (yang berada di atas tampilan peta). Plugin akan mendeteksi apakah ketukan Anda untuk div header atau untuk tampilan peta dan kemudian meneruskan acara sentuh dengan tepat.
Ini berarti Anda dapat menggunakan tampilan asli Google Maps yang mirip dengan elemen HTML .
Gitter : (dikelola oleh @Hirbod)
https://gitter.im/nightstomp/cordova-plugin-googlemaps
