cordova plugin googlemaps
Version 1.3.9
| 다운로드 | 빌드 테스트(multiple_maps 분기) |
|---|---|
이 플러그인은 애플리케이션에 Google 지도를 표시합니다. 이 플러그인은 각 플랫폼에 대해 다음 라이브러리를 사용합니다.
PhoneGap과 Apache Cordova가 모두 지원됩니다.
안드로이드, iOS | 브라우저 |
$> cordova plugin add cordova-plugin-googlemaps
그런 다음 Google Maps 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 ) ; < 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)
Google Play 서비스 SDK 버전입니다. 다른 모든 플러그인과 동일한 버전 번호를 지정해야 합니다. 여기에서 최신 버전을 확인하세요.
ANDROID_SUPPORT_V4_VERSION = (27.1.1)
이 플러그인에는 Android 지원 라이브러리 v4가 필요합니다. 최소 버전은 24.1.0입니다. 여기에서 최신 버전을 확인하세요.
LOCATION_WHEN_IN_USE_DESCRIPTION
이 메시지는 애플리케이션이 필요한 시간 동안만 LOCATION PERMISSION을 요청하는 경우 표시됩니다.
LOCATION_ALWAYS_USAGE_DESCRIPTION
이 메시지는 애플리케이션이 항상 LOCATION PERMISSION을 요청할 때 표시됩니다.
이 플러그인을 무료로 유지하려면 이 프로젝트에 약간의 기부를 고려해 보세요.
v2.7.1
v2.7.0
UIWebView 지원하지 않습니다. WKWebView 전용입니다.map.stopAnimation()map.setDiv(null) 이후 크기 조정 이벤트 방지데모(브라우저)
모든 문서가 여기에 있습니다 !!
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md
빠른 예
 지도 | var 옵션 = {
카메라: {
대상: {lat: ..., lng: ...},
줌: 19
}
};
var 지도 = 플러그인.google.maps.Map.getMap(mapDiv, 옵션) |
 채점자 | var 마커 = map.addMarker({
위치: {lat: ..., lng: ...},
title: "iOS 및 Android용 Cordova Google 지도 안녕하세요",
snippet: "이 플러그인은 정말 멋지네요!"
}) |
 마커클러스터 | var markerCluster = map.addMarkerCluster({
//maxZoom레벨: 5,
경계 그리기: 사실,
마커: 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}}
]
}); |
 HTML정보창 | var html = "<img src='./House-icon.png' 너비='64' 높이='64' >" +
"<br>" +
"이것은 예입니다";
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(marker);
|
 원 | var 원 = map.addCircle({
'중심': {lat: ..., lng: ...},
'반경': 300,
'스트로크컬러': '#AA00FF',
'스트로크폭': 5,
'채우기색상': '#880000'
}); |
 폴리라인 | var 폴리라인 = map.addPolyline({
포인트: AIR_PORTS,
'색상': '#AA00FF',
'너비': 10,
'측지학': 사실
}); |
 다각형 | var 다각형 = map.addPolygon({
'포인트': GORYOKAKU_POINTS,
'스트로크컬러': '#AA00FF',
'스트로크폭': 5,
'채우기색상': '#880000'
}); |
 지면 오버레이 | var groundOverlay = map.addGroundOverlay({
'url': "./newark_nj_1922.jpg",
'경계': [
{"lat": 40.712216, "lng": -74.22655},
{"lat": 40.773941, "lng": -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': '폴리곤.kml'
}, function(kmlOverlay) { ... }); |
 지오코더 | 플러그인.google.maps.Geocoder.geocode({
// 미국의 수도
"주소": [
"미국 앨라배마주 몽고메리", ... "미국 와이오밍주 샤이엔"
]
}, function(mvcArray) { ... }); |
 폴리 유틸리티 | var GORYOKAKU_POINTS = [
{lat: 41.79883, lng: 140.75675},
...
{lat: 41.79883, lng: 140.75673}
]
var 포함 = 플러그인.google.maps.geometry.poly.containsLocation(
위치, GORYOKAKU_POINTS);
marker.setIcon(contain ? "blue" : "red");
|
 인코딩 유틸리티 | var GORYOKAKU_POINTS = [
{lat: 41.79883, lng: 140.75675},
...
{lat: 41.79883, lng: 140.75673}
]
var 인코딩된 경로 = 플러그인.google.maps.geometry.
인코딩.encodePath(GORYOKAKU_POINTS);
|
 구형 유틸리티 | var 제목 = 플러그인.google.maps.geometry.sphere.computeHeading(
markerA.getPosition(), markerB.getPosition());
label.innerText = "제목 : " +heading.toFixed(0) + "°";
|
 위치 서비스 | 플러그인.google.maps.LocationService.getMyLocation(function(result) {
Alert(["현재 위치:n",
"위도:" + location.latLng.lat.toFixed(3),
"경도:" + location.latLng.lng.toFixed(3),
"속도:" + 위치.속도,
"시간:" + 위치.시간,
"베어링:" + location.bearing].join("n"));
});
|
 스트리트 뷰 | var div = document.getElementById("pano_canvas1");
var 파노라마 = 플러그인.google.maps.StreetView.getPanorama(div, {
카메라: {
대상: {lat: 42.345573, lng: -71.098326}
}
}); |
Google Maps JavaScript API v3은 모든 플랫폼에서 작동하지만 기기가 오프라인 인 경우에는 작동하지 않습니다.
이 플러그인은 세 가지 API를 사용합니다.
Android 및 iOS 애플리케이션에서 이 플러그인은 Google Maps JavaScript API v3보다 빠른 기본 Google 지도 보기를 표시합니다. 장치가 오프라인 인 경우에도 작동합니다.
브라우저 플랫폼에서 이 플러그인은 JS 지도 보기(Google Maps JavaScript API v3)를 표시합니다. PWA(프로그레시브 웹 애플리케이션)로 작동해야 하지만 장치가 온라인 상태여야 합니다.
모든 플랫폼에서 작동하기 위해 이 플러그인은 각 원본 API 대신 자체 API를 제공합니다. Google Maps JavaScript API v3 similar to 코드를 작성할 수 있습니다.
기능 비교표
| Google 지도 JavaScript API v3 | Cordova-플러그인-GoogleMaps(Android,iOS) | Cordova-플러그인-GoogleMaps(브라우저) | |
|---|---|---|---|
| 렌더링 시스템 | 자바스크립트 + HTML | JavaScript + 네이티브 API | 자바스크립트 |
| 오프라인 지도 | 불가능 | 가능(표시된 영역만) | 불가능 |
| 3D뷰 | 불가능 | 가능한 | 불가능 |
| 플랫폼 | 모든 브라우저 | Android 및 iOS 애플리케이션에만 해당 | 모든 브라우저 |
| 타일 이미지 | 비트맵 | 벡터 | 비트맵 |
클래스 비교표
| Google 지도 JavaScript API v3 | Cordova-플러그인-GoogleMaps |
|---|---|
| google.maps.지도 | 지도 |
| google.maps.Marker | 채점자 |
| google.maps.InfoWindow | 기본 InfoWindow 및 HtmlInfoWindow |
| google.maps.원 | 원 |
| google.maps.사각형 | 다각형 |
| google.maps.폴리라인 | 폴리라인 |
| google.maps.다각형 | 다각형 |
| google.maps.GroundOverlay | 지면 오버레이 |
| google.maps.ImageMapType | 타일오버레이 |
| google.maps.MVC객체 | 기본클래스 |
| google.maps.MVCArray | BaseArrayClass |
| google.maps.지오코더 | 플러그인.google.maps.geocoder |
| google.maps.geometry.sphere | 플러그인.google.maps.geometry.sphere |
| google.maps.geometry.encoding | 플러그인.google.maps.geometry.encoding |
| google.maps.geometry.poly | 플러그인.google.maps.geometry.poly |
| (사용할 수 없음) | 마커클러스터 |
| google.maps.KmlLayer | Kml오버레이 |
| (사용할 수 없음) | 위치서비스 |
| 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용인지 지도 보기용인지 감지한 다음 터치 이벤트를 적절하게 전달합니다.
즉, HTML 요소와 유사한 기본 Google 지도 보기를 사용할 수 있습니다 .
Gitter : (@Hirbod가 관리)
https://gitter.im/nightstomp/cordova-plugin-googlemaps
