cordova plugin googlemaps
Version 1.3.9
| تحميل | اختبار البناء (فرع multi_maps) |
|---|---|
يعرض هذا البرنامج المساعد خرائط Google في تطبيقك. يستخدم هذا البرنامج المساعد هذه المكتبات لكل منصة:
يتم دعم كل من 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 الإصدار 4. الحد الأدنى للإصدار هو 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
أمثلة سريعة
 رسم خريطة | خيارات فار = {
آلة تصوير: {
الهدف: {lat: ..., lng: ...},
التكبير: 19
}
};
فار خريطة = plugin.google.maps.Map.getMap(mapDiv، خيارات) |
 علامة | فار ماركر = Map.addMarker({
الموضع: {خط العرض: ...، الغاز الطبيعي المسال: ...}،
العنوان: "مرحبًا خرائط Google لكوردوفا لنظامي التشغيل iOS وAndroid"،
مقتطف: "هذا البرنامج المساعد رائع!"
}) |
 MarkerCluster | فار ماركر كلستر = Map.addMarkerCluster({
//maxZoomLevel: 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}}
]
}); |
 htmlInfoWindow | var html = "<img src='./House-icon.png' width='64' height='64' >" +
"<br>" +
"هذا مثال"؛
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(marker);
|
 دائرة | دائرة فار = Map.addCircle({
'المركز': {خط العرض: ...، الغاز الطبيعي المسال: ...}،
"نصف القطر": 300،
"لون السكتة الدماغية": "#AA00FF"،
"عرض السكتة الدماغية": 5،
'لون التعبئة' : '#880000'
}); |
 متعدد الخطوط | فار متعدد الخطوط = Map.addPolyline({
النقاط: AIR_PORTS،
"اللون": "#AA00FF"،
"العرض": 10،
"الجيوديسية": صحيح
}); |
 مضلع | فار المضلع = Map.addPolygon({
"النقاط": GORYOKAKU_POINTS،
"لون السكتة الدماغية": "#AA00FF"،
"عرض السكتة الدماغية": 5،
'لون التعبئة' : '#880000'
}); |
 GroundOverlay | فار جراوند أوفرلاي = Map.addGroundOverlay({
'url': "./newark_nj_1922.jpg"،
"الحدود": [
{"خط العرض": 40.712216، "lng": -74.22655}،
{"خط العرض": 40.773941، "lng": -74.12544}
]،
"التعتيم": 0.5
});
|
 تراكب البلاط | فار تيلي أوفيرلاي = ماب.أد تيلي أوفيرلاي({
تصحيح: صحيح،
العتامة: 0.75،
getTile: الوظيفة (x، y، Zoom) {
إرجاع "../images/map-for-free/" + Zoom + "_" + x + "-" + y + ".gif"
}
}); |
 KmlOverlay | خريطة.addKmlOverlay({
"عنوان URL": "polygon.kml"
}, function(kmlOverlay) { ... }); |
 المشفر الجغرافي | plugin.google.maps.Geocoder.geocode({
// العواصم الأمريكية
"عنوان": [
"مونتغمري، AL، الولايات المتحدة الأمريكية"، ... "شايان، وايومنغ، الولايات المتحدة الأمريكية"
]
}, function(mvcArray) { ... }); |
 فائدة بولي | فار GORYOKAKU_POINTS = [
{خط العرض: 41.79883، الغاز الطبيعي المسال: 140.75675}،
...
{خط العرض: 41.79883، الغاز الطبيعي المسال: 140.75673}
]
فار يحتوي على = plugin.google.maps.geometry.poly.containsLocation(
الموقف، GORYOKAKU_POINTS)؛
marker.setIcon(contain ? "blue" : "red");
|
 فائدة التشفير | فار GORYOKAKU_POINTS = [
{خط العرض: 41.79883، الغاز الطبيعي المسال: 140.75675}،
...
{خط العرض: 41.79883، الغاز الطبيعي المسال: 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 : " + heading.toFixed(0) + "°";
|
 خدمة الموقع | plugin.google.maps.LocationService.getMyLocation(function(result) {
تنبيه(["موقعك الحالي:n"،
"خط العرض:" + location.latLng.lat.toFixed(3)،
"خط الطول:" + location.latLng.lng.toFixed(3)،
"السرعة:" + location.speed،
"الوقت:" + الموقع.الوقت،
"تحمل:" + location.bearing].join("n"));
});
|
 التجوّل الافتراضي | var div = document.getElementById("pano_canvas1");
فار بانوراما = plugin.google.maps.StreetView.getPanorama(div, {
آلة تصوير: {
الهدف: {خط العرض: 42.345573، الغاز الطبيعي المسال: -71.098326}
}
}); |
يعمل الإصدار 3 من واجهة برمجة تطبيقات JavaScript لخرائط Google على أي نظام أساسي، ولكنه لا يعمل إذا كان الجهاز غير متصل بالإنترنت .
يستخدم هذا البرنامج المساعد ثلاث واجهات برمجة تطبيقات مختلفة:
في تطبيقات Android وiOS، يعرض هذا المكون الإضافي طرق عرض خرائط Google الأصلية، وهو أسرع من Google Maps JavaScript API v3. ويعمل حتى إذا كان الجهاز غير متصل بالإنترنت .
في النظام الأساسي للمتصفح، يعرض هذا المكون الإضافي طرق عرض خريطة JS (Google Maps JavaScript API v3). يجب أن يعمل كـ PWA (تطبيق ويب تقدمي)، ولكن يجب أن يكون الجهاز متصلاً بالإنترنت .
من أجل العمل على جميع الأنظمة الأساسية، يوفر هذا البرنامج المساعد واجهة برمجة التطبيقات الخاصة به بدلاً من كل واجهات برمجة التطبيقات الأصلية. يمكنك كتابة التعليمات البرمجية الخاصة بك similar to Google Maps JavaScript API v3.
جدول مقارنة الميزات
| خرائط جوجل جافا سكريبت API v3 | Cordova-Plugin-GoogleMaps(Android، iOS) | Cordova-Plugin-GoogleMaps (المتصفح) | |
|---|---|---|---|
| نظام التقديم | جافا سكريبت + HTML | جافا سكريبت + واجهات برمجة التطبيقات الأصلية | جافا سكريبت |
| خريطة حاليا | غير ممكن | ممكن (منطقتك المعروضة فقط) | غير ممكن |
| عرض ثلاثي الأبعاد | غير ممكن | ممكن | غير ممكن |
| منصة | جميع المتصفحات | تطبيقات Android و iOS فقط | جميع المتصفحات |
| صورة البلاط | الصورة النقطية | ناقل | الصورة النقطية |
جدول مقارنة الفئات
| خرائط جوجل جافا سكريبت API v3 | كوردوفا-البرنامج المساعد-GoogleMaps |
|---|---|
| google.maps.Map | رسم خريطة |
| google.maps.Marker | علامة |
| 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 | 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 | KmlOverlay |
| (غير متوفر) | خدمة الموقع |
| 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 الموجودة على الخريطة تلقائيًا أم لا.
على سبيل المثال، في الصورة أدناه، لنفترض أنك قمت بالنقر فوق قسم الرأس (الموجود فوق عرض الخريطة). سيكتشف المكون الإضافي ما إذا كان النقر الخاص بك مخصصًا لقسم الرأس أو لعرض الخريطة ثم يمرر حدث اللمس بشكل مناسب.
وهذا يعني أنه يمكنك استخدام عروض خرائط Google الأصلية المشابهة لعناصر HTML .
Gitter : (بإدارة @Hirbod)
https://gitter.im/nightstomp/cordova-plugin-googlemaps
