cordova plugin googlemaps
Version 1.3.9
| Herunterladen | Build-Test (Multiple_maps-Zweig) |
|---|---|
Dieses Plugin zeigt Google Maps in Ihrer Anwendung an. Dieses Plugin verwendet diese Bibliotheken für jede Plattform:
Sowohl PhoneGap als auch Apache Cordova werden unterstützt.
Android, iOS | Browser |
$> cordova plugin add cordova-plugin-googlemaps
Legen Sie dann Ihre Google Maps-API-Schlüssel in Ihrer config.xml fest (Android/iOS).
< widget ...>
< preference name = " GOOGLE_MAPS_ANDROID_API_KEY " value = " (api key) " />
< preference name = " GOOGLE_MAPS_IOS_API_KEY " value = " (api key) " />
</ widget >Für Browser-Plattform,
// 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)
Die Google Play Services SDK-Version. Bei allen anderen Plugins müssen Sie die gleiche Versionsnummer angeben. Schauen Sie sich hier die neueste Version an.
ANDROID_SUPPORT_V4_VERSION = (27.1.1)
Dieses Plugin erfordert die Android-Supportbibliothek v4. Die Mindestversion ist 24.1.0. Schauen Sie sich hier die neueste Version an.
LOCATION_WHEN_IN_USE_DESCRIPTION
Diese Meldung wird angezeigt, wenn Ihre Anwendung nur für erforderliche Zeiten eine STANDORTERLAUBNIS anfordert.
LOCATION_ALWAYS_USAGE_DESCRIPTION
Diese Meldung wird angezeigt, wenn Ihre Anwendung eine STANDORTBERECHTIGUNG für immer anfordert.
Um dieses Plugin weiterhin kostenlos zu halten, denken Sie bitte darüber nach, einen kleinen Betrag für dieses Projekt zu spenden.
v2.7.1
v2.7.0
UIWebView wird unter iOS nicht mehr unterstützt. Nur WKWebView .map.stopAnimation()map.setDiv(null) verhindernDemo (Browser)
Alle Dokumentationen sind hier!!
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md
Kurze Beispiele
 Karte | var-Optionen = {
Kamera: {
Ziel: {lat: ..., lng: ...},
Zoom: 19
}
};
var map =plugin.google.maps.Map.getMap(mapDiv, Optionen) |
 Marker | var marker = map.addMarker({
Position: {lat: ..., lng: ...},
Titel: „Hallo Cordova, Google Maps für iOS und Android“,
Snippet: „Dieses Plugin ist großartig!“
}) |
 MarkerCluster | var markerCluster = map.addMarkerCluster({
//maxZoomLevel: 5,
boundsDraw: wahr,
Markierungen: dummyData(),
Symbole: [
{min: 2, max: 100, url: "./img/blue.png", Anker: {x: 16, y: 16}},
{min: 100, max: 1000, url: „./img/yellow.png“, Anker: {x: 16, y: 16}},
{min: 1000, max: 2000, url: „./img/purple.png“, Anker: {x: 24, y: 24}},
{min: 2000, url: "./img/red.png",Anker: {x: 32,y: 32}}
]
}); |
 HtmlInfoWindow | var html = "<img src='./House-icon.png' width='64' height='64' >" +
„<br>“ +
„Das ist ein Beispiel“;
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(marker);
|
 Kreis | var Circle = map.addCircle({
'center': {lat: ..., lng: ...},
'Radius': 300,
'StrokeColor': '#AA00FF',
'StrokeWidth': 5,
'fillColor': '#880000'
}); |
 Polylinie | var polyline = map.addPolyline({
Punkte: AIR_PORTS,
'Farbe': '#AA00FF',
'Breite': 10,
'geodätisch': wahr
}); |
 Polygon | var polygon = map.addPolygon({
'Punkte': GORYOKAKU_POINTS,
'StrokeColor': '#AA00FF',
'StrokeWidth': 5,
'fillColor': '#880000'
}); |
 GroundOverlay | vargroundOverlay = map.addGroundOverlay({
'url': "./newark_nj_1922.jpg",
'Grenzen': [
{"lat": 40.712216, "lng": -74.22655},
{"lat": 40.773941, "lng": -74.12544}
],
'Deckkraft': 0,5
});
|
 TileOverlay | var TileOverlay = map.addTileOverlay({
debuggen: wahr,
Deckkraft: 0,75,
getTile: function(x, y, zoom) {
return „../images/map-for-free/“ + zoom + „_“ + x + „-“ + y + „.gif“
}
}); |
 KmlOverlay | map.addKmlOverlay({
'url': 'polygon.kml'
}, function(kmlOverlay) { ... }); |
 Geocoder | plugin.google.maps.Geocoder.geocode({
// US-Hauptstädte
"Adresse": [
„Montgomery, AL, USA“, ... „Cheyenne, Wyoming, USA“
]
}, function(mvcArray) { ... }); |
 Poly-Dienstprogramm | var GORYOKAKU_POINTS = [
{lat: 41.79883, lng: 140.75675},
...
{lat: 41,79883, lng: 140,75673}
]
var include =plugin.google.maps.geometry.poly.containsLocation(
Position, GORYOKAKU_POINTS);
marker.setIcon(contain ? "blue" : "red");
|
 Codierungsdienstprogramm | var GORYOKAKU_POINTS = [
{lat: 41.79883, lng: 140.75675},
...
{lat: 41,79883, lng: 140,75673}
]
var encodedPath =plugin.google.maps.geometry.
kodierung.encodePath(GORYOKAKU_POINTS);
|
 sphärischer Nutzen | var heading =plugin.google.maps.geometry.spherical.computeHeading(
markerA.getPosition(), markerB.getPosition());
label.innerText = "heading : " + heading.toFixed(0) + "°";
|
 Ortungsdienst | plugin.google.maps.LocationService.getMyLocation(function(result) {
warning(["Ihr aktueller Standort:n",
„latitude:“ + location.latLng.lat.toFixed(3),
„Längengrad:“ + location.latLng.lng.toFixed(3),
„speed:“ + location.speed,
„Zeit:“ + Ort.Zeit,
"Bearing:" + location.Bearing].join("n"));
});
|
 StreetView | var div = document.getElementById("pano_canvas1");
var panorama =plugin.google.maps.StreetView.getPanorama(div, {
Kamera: {
Ziel: {lat: 42.345573, lng: -71.098326}
}
}); |
Die Google Maps JavaScript API v3 funktioniert auf allen Plattformen, funktioniert jedoch nicht, wenn das Gerät offline ist.
Dieses Plugin verwendet drei verschiedene APIs:
In Android- und iOS-Anwendungen zeigt dieses Plugin native Google Maps-Ansichten an, was schneller ist als die Google Maps JavaScript API v3. Und es funktioniert sogar, wenn das Gerät offline ist.
Auf der Browser-Plattform zeigt dieses Plugin JS-Kartenansichten an (Google Maps JavaScript API v3). Es sollte als PWA (Progressive Web Application) funktionieren, allerdings muss das Gerät online sein.
Um für alle Plattformen zu funktionieren, bietet dieses Plugin eine eigene API anstelle der einzelnen Original-APIs. Sie können Ihren Code similar to der Google Maps JavaScript API v3 schreiben.
Funktionsvergleichstabelle
| Google Maps JavaScript API v3 | Cordova-Plugin-GoogleMaps (Android, iOS) | Cordova-Plugin-GoogleMaps(Browser) | |
|---|---|---|---|
| Rendering-System | JavaScript + HTML | JavaScript + native APIs | JavaScript |
| Offline-Karte | Nicht möglich | Möglich (nur Ihr angezeigter Bereich) | Nicht möglich |
| 3D-Ansicht | Nicht möglich | Möglich | Nicht möglich |
| Plattform | Alle Browser | Nur Android- und iOS-Anwendungen | Alle Browser |
| Kachelbild | Bitmap | Vektor | Bitmap |
Klassenvergleichstabelle
| Google Maps JavaScript API v3 | Cordova-Plugin-GoogleMaps |
|---|---|
| google.maps.Map | Karte |
| google.maps.Marker | Marker |
| google.maps.InfoWindow | Standard-InfoWindow und HtmlInfoWindow |
| google.maps.Circle | Kreis |
| google.maps.Rectangle | Polygon |
| google.maps.Polyline | Polylinie |
| google.maps.Polygon | Polygon |
| google.maps.GroundOverlay | GroundOverlay |
| google.maps.ImageMapType | TileOverlay |
| google.maps.MVCObject | Basisklasse |
| google.maps.MVCArray | BaseArrayClass |
| 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 |
| (nicht verfügbar) | MarkerCluster |
| google.maps.KmlLayer | KmlOverlay |
| (nicht verfügbar) | Standortservice |
| google.maps.StreetView | StreetView |
| google.maps.Data | (nicht verfügbar) |
| google.maps.DirectionsService | (nicht verfügbar) |
| google.maps.DistanceMatrixService | (nicht verfügbar) |
| google.maps.TransitLayer | (nicht verfügbar) |
| google.maps.places.* | (nicht verfügbar) |
| google.maps.visualization.* | (nicht verfügbar) |
Dieses Plugin generiert native Kartenansichten und platziert sie im Browser .
Die Kartenansichten sind keine HTML-Elemente. Dies bedeutet, dass es sich nicht um ein <div> oder irgendetwas HTML-bezogenes handelt. Sie können jedoch die Größe und Position der Kartenansicht mithilfe des enthaltenen <div> angeben.
Dieses Plugin ändert den Hintergrund in Ihrer Anwendung in transparent . Dann erkennt das Plugin Ihre Berührungsposition, die entweder für die native map oder ein html element gedacht ist (das sich oben auf Ihrer Karte oder an einer anderen Stelle auf dem Bildschirm befinden kann).
Der Vorteil dieses Plugins ist die Fähigkeit, automatisch zu erkennen, welche HTML-Elemente sich über der Karte befinden oder nicht.
Angenommen, Sie tippen im Bild unten auf das Header-Div (das sich über der Kartenansicht befindet). Das Plugin erkennt, ob Sie auf das Header-Div oder die Kartenansicht tippen, und übergibt dann das Touch-Ereignis entsprechend.
Dies bedeutet, dass Sie die nativen Google Maps-Ansichten ähnlich wie HTML-Elemente verwenden können .
Gitter: (verwaltet von @Hirbod)
https://gitter.im/nightstomp/cordova-plugin-googlemaps
