cordova plugin googlemaps
Version 1.3.9
| ดาวน์โหลด | การทดสอบการสร้าง (สาขา multiple_maps) |
|---|---|
ปลั๊กอินนี้จะแสดง Google Maps ในแอปพลิเคชันของคุณ ปลั๊กอินนี้ใช้ไลบรารีเหล่านี้สำหรับแต่ละแพลตฟอร์ม:
รองรับทั้ง PhoneGap และ Apache Cordova
แอนดรอยด์, ไอโอเอส | เบราว์เซอร์ |
$> 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 Services SDK คุณต้องระบุหมายเลขเวอร์ชันเดียวกันกับปลั๊กอินอื่นๆ ทั้งหมด ตรวจสอบเวอร์ชันล่าสุดได้ที่นี่
ANDROID_SUPPORT_V4_VERSION = (27.1.1)
ปลั๊กอินนี้ต้องการไลบรารีสนับสนุน Android v4 เวอร์ชันขั้นต่ำคือ 24.1.0 ตรวจสอบเวอร์ชันล่าสุดได้ที่นี่
LOCATION_WHEN_IN_USE_DESCRIPTION
ข้อความนี้จะปรากฏขึ้นเมื่อแอปพลิเคชันของคุณขอสิทธิ์ เข้าถึงตำแหน่งเฉพาะเวลาที่จำเป็นเท่านั้น
LOCATION_ALWAYS_USAGE_DESCRIPTION
ข้อความนี้จะปรากฏขึ้นเมื่อแอปพลิเคชันของคุณขอสิทธิ์ เข้าถึงตำแหน่งเสมอ
เพื่อให้ปลั๊กอินนี้ใช้งานได้ฟรี โปรดพิจารณาบริจาคเงินจำนวนเล็กน้อยให้กับโครงการนี้
เวอร์ชัน 2.7.1
เวอร์ชัน 2.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
ตัวอย่างด่วน
 แผนที่ | ตัวเลือก var = {
กล้อง: {
เป้าหมาย: {lat: ..., lng: ...},
ซูม: 19
-
-
var map = Plugin.google.maps.Map.getMap(mapDiv, ตัวเลือก) |
 เครื่องหมาย | var marker = map.addMarker({
ตำแหน่ง: {lat: ..., lng: ...},
ชื่อ: "Hello Cordova Google Maps สำหรับ iOS และ Android",
ตัวอย่าง: "ปลั๊กอินนี้ยอดเยี่ยมมาก!"
- |
 MarkerCluster | var markerCluster = map.addMarkerCluster({
//maxZoomLevel: 5,
boundsDraw: จริง,
เครื่องหมาย: dummyData(),
ไอคอน: [
{นาที: 2, สูงสุด: 100, url: "./img/blue.png", จุดยึด: {x: 16, y: 16}},
{นาที: 100, สูงสุด: 1,000, url: "./img/yellow.png", จุดยึด: {x: 16, y: 16}},
{นาที: 1,000, สูงสุด: 2000, url: "./img/purple.png", จุดยึด: {x: 24, y: 24}},
{นาที: 2000, url: "./img/red.png",จุดยึด: {x: 32,y: 32}}
-
- |
 HtmlInfoWindow | var html = "<img src='./House-icon.png' width='64' height='64' >" +
"<br>" +
“นี่คือตัวอย่าง”;
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(เครื่องหมาย);
|
 วงกลม | วงกลม var = map.addCircle({
'center': {lat: ..., lng: ...},
'รัศมี': 300,
' strokeColor' : '#AA00FF',
'ความกว้างของเส้นขีด': 5,
'fillColor' : '#880000'
- |
 เส้นโพลีไลน์ | var polyline = map.addPolyline({
คะแนน: AIR_PORTS,
'สี' : '#AA00FF',
'ความกว้าง': 10,
'ธรณีวิทยา': จริง
- |
 รูปหลายเหลี่ยม | รูปหลายเหลี่ยม var = map.addPolygon({
'คะแนน': GORYOKAKU_POINTS,
' strokeColor' : '#AA00FF',
'ความกว้างของเส้นขีด': 5,
'fillColor' : '#880000'
- |
 กราวด์โอเวอร์เลย์ | var groundOverlay = map.addGroundOverlay({
'url': "./neark_nj_1922.jpg",
'ขอบเขต': [
{"lat": 40.712216, "lng": -74.22655},
{"lat": 40.773941, "lng": -74.12544}
-
'ความทึบ': 0.5
-
|
 ไทล์โอเวอร์เลย์ | vartileOverlay = map.addTileOverlay({
แก้ไขข้อบกพร่อง: จริง
ความทึบ: 0.75,
getTile: ฟังก์ชั่น (x, y, ซูม) {
กลับ "../images/map-for-free/" + ซูม + "_" + x + "-" + y + ".gif"
-
- |
 Kmlโอเวอร์เลย์ | map.addKmlOverlay({
'url': 'รูปหลายเหลี่ยม.kml'
}, ฟังก์ชั่น (kmlOverlay) { ... }); |
 จีโอโค้ดเดอร์ | Plugin.google.maps.Geocoder.geocode({
// เมืองหลวงของสหรัฐอเมริกา
"ที่อยู่": [
"มอนต์กอเมอรี แอละแบมา สหรัฐอเมริกา", ... "ไชแอนน์ ไวโอมิง สหรัฐอเมริกา"
-
}, ฟังก์ชั่น(mvcArray) { ... }); |
 ยูทิลิตี้โพลี | คือ GORYOKAKU_POINTS = [
{lat: 41.79883, lng: 140.75675},
-
{lat: 41.79883, lng: 140.75673}
-
var มี = Plugin.google.maps.geometry.poly.containsLocation(
ตำแหน่ง GORYOKAKU_POINTS);
marker.setIcon(มี ? "สีน้ำเงิน" : "สีแดง");
|
 เข้ารหัสยูทิลิตี้ | คือ GORYOKAKU_POINTS = [
{lat: 41.79883, lng: 140.75675},
-
{lat: 41.79883, lng: 140.75673}
-
var encodedPath = Plugin.google.maps.geometry
encoding.encodePath(GORYOKAKU_POINTS);
|
 ยูทิลิตี้ทรงกลม | ส่วนหัว var = Plugin.google.maps.geometry.spherical.computeHeading(
markerA.getPosition(), markerB.getPosition());
label.innerText = "หัวเรื่อง : " + heading.toFixed(0) + "°";
|
 บริการสถานที่ | Plugin.google.maps.LocationService.getMyLocation (ฟังก์ชัน (ผลลัพธ์) {
alert(["ตำแหน่งปัจจุบันของคุณ:n",
"ละติจูด:" + location.latLng.lat.toFixed(3),
"ลองจิจูด:" + location.latLng.lng.toFixed(3),
"ความเร็ว:" + ตำแหน่งความเร็ว
"เวลา:" + location.time,
"แบริ่ง:" + location.bearing].join("n"));
-
|
 สตรีทวิว | var div = document.getElementById("pano_canvas1");
var Panorama = Plugin.google.maps.StreetView.getPanorama(div, {
กล้อง: {
เป้าหมาย: {lat: 42.345573, lng: -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 Google Maps JavaScript API v3
ตารางเปรียบเทียบคุณสมบัติ
| Google แผนที่ JavaScript API เวอร์ชัน 3 | Cordova-ปลั๊กอิน-GoogleMaps(Android,iOS) | Cordova-Plugin-GoogleMaps(เบราว์เซอร์) | |
|---|---|---|---|
| ระบบการเรนเดอร์ | จาวาสคริปต์ + HTML | JavaScript + Native API | จาวาสคริปต์ |
| แผนที่ออฟไลน์ | เป็นไปไม่ได้ | เป็นไปได้ (เฉพาะพื้นที่ที่แสดงของคุณ) | เป็นไปไม่ได้ |
| มุมมอง 3 มิติ | เป็นไปไม่ได้ | เป็นไปได้ | เป็นไปไม่ได้ |
| แพลตฟอร์ม | เบราว์เซอร์ทั้งหมด | แอปพลิเคชัน Android และ iOS เท่านั้น | เบราว์เซอร์ทั้งหมด |
| ภาพไทล์ | บิตแมป | เวกเตอร์ | บิตแมป |
ตารางเปรียบเทียบชั้นเรียน
| Google แผนที่ JavaScript API เวอร์ชัน 3 | Cordova-ปลั๊กอิน-GoogleMaps |
|---|---|
| google.maps.แผนที่ | แผนที่ |
| google.maps.Marker | เครื่องหมาย |
| google.maps.InfoWindow | หน้าต่างข้อมูลเริ่มต้นและ HtmlInfoWindow |
| google.maps.วงกลม | วงกลม |
| google.maps.สี่เหลี่ยมผืนผ้า | รูปหลายเหลี่ยม |
| google.maps.โพลีไลน์ | เส้นโพลีไลน์ |
| google.maps.รูปหลายเหลี่ยม | รูปหลายเหลี่ยม |
| google.maps.GroundOverlay | กราวด์โอเวอร์เลย์ |
| google.maps.ImageMapType | ไทล์โอเวอร์เลย์ |
| google.maps.MVCObject | เบสคลาส |
| 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 |
| (ไม่พร้อมใช้งาน) | MarkerCluster |
| google.maps.KmlLayer | Kmlโอเวอร์เลย์ |
| (ไม่พร้อมใช้งาน) | บริการระบุตำแหน่ง |
| google.maps.StreetView | สตรีทวิว |
| google.maps.Data | (ไม่พร้อมใช้งาน) |
| 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 ได้
Gitter : (จัดการโดย @Hirbod)
https://gitter.im/nightstomp/cordova-plugin-googlemaps
