cordova plugin googlemaps
Version 1.3.9
| Скачать | Тест сборки (ветвь Multiple_maps) |
|---|---|
Этот плагин отображает Карты Google в вашем приложении. Этот плагин использует эти библиотеки для каждой платформы:
Поддерживаются как PhoneGap, так и Apache Cordova.
Андроид, iOS | Браузер |
$> cordova plugin add cordova-plugin-googlemaps
Затем установите ключи API Google Maps в свой 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 ) ; < 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)
Версия SDK сервисов Google Play. Вам необходимо указать тот же номер версии для всех остальных плагинов. Ознакомьтесь с последней версией здесь.
ANDROID_SUPPORT_V4_VERSION = (27.1.1)
Для этого плагина требуется библиотека поддержки Android v4. Минимальная версия — 24.1.0. Ознакомьтесь с последней версией здесь.
LOCATION_WHEN_IN_USE_DESCRIPTION
Это сообщение отображается, когда ваше приложение запрашивает РАЗРЕШЕНИЕ НА МЕСТОПОЛОЖЕНИЕ только в необходимое время .
LOCATION_ALWAYS_USAGE_DESCRIPTION
Это сообщение отображается, когда ваше приложение запрашивает РАЗРЕШЕНИЕ МЕСТОПОЛОЖЕНИЯ на всегда .
Чтобы этот плагин оставался бесплатным, пожалуйста, рассмотрите возможность пожертвования небольшой суммы на этот проект.
v2.7.1
v2.7.0
UIWebView больше не поддерживается на iOS. Только WKWebView .map.stopAnimation()map.setDiv(null)Демо (Браузер)
Вся документация здесь!!
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md
Быстрые примеры
 Карта | варианты вар = {
камера: {
цель: {широта: ..., долгота: ...},
масштаб: 19
}
};
var карта = плагин.google.maps.Map.getMap(mapDiv, options) |
 Маркер | var маркер = map.addMarker({
позиция: {широта: ..., долгота: ...},
title: «Привет, Кордова, Карты Google для iOS и Android»,
фрагмент: «Этот плагин потрясающий!»
}) |
 МаркерКластер | var маркерКластер = map.addMarkerCluster({
//maxZoomLevel: 5,
границыDraw: правда,
маркеры: dummyData(),
значки: [
{мин: 2, макс: 100, URL: "./img/blue.png", привязка: {x: 16, y: 16}},
{мин: 100, макс: 1000, URL: "./img/yellow.png", привязка: {x: 16, y: 16}},
{мин: 1000, макс: 2000, URL: "./img/purple.png", привязка: {x: 24, y: 24}},
{мин: 2000, URL: "./img/red.png", привязка: {x: 32,y: 32}}
]
}); |
 Хтмлинформоокно | var html = "<img src='./House-icon.png' width='64' height='64' >" +
"<br>" +
«Это пример»;
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(маркер);
|
 Круг | вар круг = map.addCircle({
'центр': {широта: ..., долгота: ...},
'радиус': 300,
'strokeColor': '#AA00FF',
'strokeWidth': 5,
'fillColor': '#880000'
}); |
 Полилиния | var полилиния = map.addPolyline({
баллы: AIR_PORTS,
'цвет': '#AA00FF',
'ширина': 10,
«геодезический»: правда
}); |
 Полигон | var многоугольник = map.addPolygon({
'очки': GORYOKAKU_POINTS,
'strokeColor': '#AA00FF',
'strokeWidth': 5,
'fillColor': '#880000'
}); |
 GroundOverlay | var groundOverlay = map.addGroundOverlay({
'url': "./newark_nj_1922.jpg",
'границы': [
{"широта": 40,712216, "долгосрочность": -74,22655},
{"широта": 40,773941, "долгосрочность": -74,12544}
],
«непрозрачность»: 0,5
});
|
 ПлиткаНаложение | var tileOverlay = map.addTileOverlay({
отладка: правда,
непрозрачность: 0,75,
getTile: функция (x, y, масштаб) {
return "../images/map-for-free/" + масштабирование + "_" + x + "-" + y + ".gif"
}
}); |
 KmlОверлей | map.addKmlOverlay({
'url': 'polygon.kml'
}, функция (kmlOverlay) { ... }); |
 Геокодер | плагин.google.maps.Geocoder.geocode({
// Столицы США
"адрес": [
«Монтгомери, Алабама, США», ... «Шайенн, Вайоминг, США»
]
}, функция (mvcArray) { ... }); |
 поли утилита | вар GORYOKAKU_POINTS = [
{широта: 41,79883, долгота: 140,75675},
...
{широта: 41,79883, долгота: 140,75673}
]
var содержат = плагин.google.maps.geometry.poly.containsLocation(
позиция, GORYOKAKU_POINTS);
маркер.setIcon(содержат? "синий": "красный");
|
 утилита кодирования | вар GORYOKAKU_POINTS = [
{широта: 41,79883, долгота: 140,75675},
...
{широта: 41,79883, долгота: 140,75673}
]
var encodedPath = плагин.google.maps.geometry.
кодирование.encodePath(GORYOKAKU_POINTS);
|
 сферическая полезность | var heading = плагин.google.maps.geometry.spherical.computeHeading(
маркерA.getPosition(), маркерB.getPosition());
label.innerText = "heading:" + heading.toFixed(0) + "°";
|
 Служба определения местоположения | плагин.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 panorama = плагин.google.maps.StreetView.getPanorama(div, {
камера: {
цель: {широта: 42,345573, долгота: -71,098326}
}
}); |
Google Maps JavaScript API v3 работает на любых платформах, но не работает, если устройство находится в автономном режиме .
Этот плагин использует три разных API:
В приложениях Android и iOS этот плагин отображает собственные виды Google Maps, что быстрее , чем Google Maps JavaScript API v3. И это работает даже если устройство находится в автономном режиме .
На платформе браузера этот плагин отображает виды карт JS (Google Maps JavaScript API v3). Оно должно работать как PWA (прогрессивное веб-приложение), но устройство должно быть онлайн .
Чтобы работать на всех платформах, этот плагин предоставляет собственный API вместо каждого исходного API. Вы можете написать свой код similar to API JavaScript Google Maps v3.
Сравнительная таблица функций
| Google Maps JavaScript API v3 | Cordova-Плагин-GoogleMaps(Android,iOS) | Cordova-Плагин-GoogleMaps(Браузер) | |
|---|---|---|---|
| Система рендеринга | JavaScript + HTML | JavaScript + собственный API | JavaScript |
| Оффлайн карта | Невозможно | Возможно (только ваша отображаемая область) | Невозможно |
| 3D-просмотр | Невозможно | Возможный | Невозможно |
| Платформа | Все браузеры | Только приложения для Android и iOS | Все браузеры |
| Изображение плитки | Растровое изображение | Вектор | Растровое изображение |
Таблица сравнения классов
| Google Maps JavaScript API v3 | Cordova-Плагин-GoogleMaps |
|---|---|
| google.maps.Карта | Карта |
| google.maps.Маркер | Маркер |
| google.maps.InfoWindow | InfoWindow по умолчанию и HtmlInfoWindow |
| google.maps.Circle | Круг |
| google.maps.Rectangle | Полигон |
| google.maps.Polyline | Полилиния |
| google.maps.Polygon | Полигон |
| google.maps.GroundOverlay | GroundOverlay |
| google.maps.ImageMapType | ПлиткаНаложение |
| google.maps.MVCObject | Базовый класс |
| google.maps.MVCArray | БазовыйArrayClass |
| google.maps.Геокодер | плагин.google.maps.geocoder |
| google.maps.geometry.Sphereical | плагин.google.maps.geometry.Sphereical |
| google.maps.geometry.encoding | плагин.google.maps.geometry.encoding |
| google.maps.geometry.poly | плагин.google.maps.geometry.poly |
| (нет в наличии) | МаркерКластер |
| google.maps.KmlLayer | KmlOverlay |
| (нет в наличии) | МестоположениеСервис |
| google.maps.StreetView | Просмотр улиц |
| google.maps.Данные | (нет в наличии) |
| google.maps.DirectionsService | (нет в наличии) |
| google.maps.DistanceMatrixService | (нет в наличии) |
| google.maps.TransitLayer | (нет в наличии) |
| google.maps.places.* | (нет в наличии) |
| google.maps.visualization.* | (нет в наличии) |
Этот плагин генерирует собственные виды карт и помещает их в браузер .
Виды карты не являются элементами HTML. Это означает, что они не являются <div> или чем-то связанным с HTML. Но вы можете указать размер и положение представления карты, используя содержащийся в нем <div> .
Этот плагин меняет фон в вашем приложении на transparent . Затем плагин определяет вашу позицию касания, которая предназначена либо для native map , либо для html element (который может находиться поверх вашей карты или в любом другом месте экрана).
Преимущество этого плагина — возможность автоматически определять, какие HTML-элементы находятся над картой, а какие нет.
Например, на изображении ниже вы нажимаете на заголовок div (который находится над видом карты). Плагин определит, относится ли ваше касание к div-заголовку или к виду карты, а затем соответствующим образом передаст событие касания.
Это означает, что вы можете использовать собственные представления Google Maps, аналогичные элементам HTML .
Гиттер: (управляется @Hirbod)
https://gitter.im/nightstomp/cordova-plugin-googlemaps
