التعليق: اليوم سوف نجمع بين تحديد الموقع الجغرافي HTML5 لتطوير تطبيق صغير. يمكن للأصدقاء المهتمين التعرف على ذلك. إذا كانت هناك أي أوجه قصور ، آمل أن يقدم لك البطل النصيحة.
سنجمع اليوم بين الموقع الجغرافي HTML5 مع خرائط Google لتطوير تطبيق صغير. خرائط Google عنوان API: https://developers.google.com/maps/documentation/javaScript/؟hl=zh-cn.للاتصال بخرائط Google ، يحتاج التنفيذ إلى إضافة مرجع JS <script type = text/javaScript SRC =؟ sensor = false> </script> ، حيث المعنى المحدد لمعلمة المستشعر:
لاستخدام واجهة برمجة تطبيقات خرائط Google ، تحتاج إلى الإشارة إلى ما إذا كان تطبيقك يستخدم أجهزة استشعار (مثل محددات GPS) في أي مكتبة API MAPS أو طلبات الخدمة لتحديد مكان المستخدم. هذا مهم بشكل خاص للأجهزة المحمولة. إذا كان تطبيق Google Maps API الخاص بك يستخدم أي نموذج من مستشعر لتحديد موقع الجهاز الذي يصل إلى التطبيق الخاص بك ، فيجب عليك إعلان ذلك عن طريق تعيين قيمة معلمة المستشعر إلى TRUE.
جزء HTML بسيط نسبيًا ، تحتاج فقط إلى إعداد Div:
<body>
<viv>
</div>
</body>
إطار رمز JS هو كما يلي:
<script type = "text/javaScript">
خريطة فار
var browsersupport = false ؛
var محاولات = 0 ؛
$ (وثيقة). ready (function () {
// تهيئة الخريطة
initMap () ؛
//موضع
getLocation () ؛
// تتبع الموقع
WatchLocation () ؛
}) ؛
وظيفة initMap () {
/ * اضبط جميع الخيارات للخريطة */
خيارات var = {
} ؛
/ * إنشاء خريطة جديدة للتطبيق */
MAP = جديد google.maps.map ($ ('#map') [0] ، Options) ؛
}
/*
* إذا كان كائن تحديد الموقع الجغرافي W3C متاحًا ، فاحصل على التيار
* الموقع ، وإبلاغ المشكلة بخلاف ذلك
*/
وظيفة getLocation () {
}
وظيفة watchlocation () {
}
/ * ارسم الموقع على الخريطة وتكبيره */
وظيفة المؤامرة (الموضع) {
}
/ * الإبلاغ عن أي أخطاء باستخدام هذه الوظيفة */
وظيفة ReportProblem (e) {
}
</script>
تتمثل طريقة initmap في استدعاء واجهة برمجة تطبيقات خرائط Google لتهيئة الخريطة. يحتاج إلى تعيين كائن الخيارات واستخدامه عند استدعاء تهيئة الخريطة.
وظيفة initMap () {
/ * اضبط جميع الخيارات للخريطة */
خيارات var = {
التكبير: 4 ،
المركز: جديد google.maps.latlng (38.6201 ، -90.2003) ،
maptypeid: google.maps.maptypeid.roadmap ،
Maptypecontrol: صحيح ،
maptypecontroloptions: {
النمط: google.maps.maptypecontrolstyle.horizontal_bar ،
الموضع: google.maps.controlposition.bottom_center
} ،
Pancontrol: صحيح ،
pancontroloptions: {
الموضع: google.maps.controlposition.top_right
} ،
Zoomcontrol: صحيح ،
ZoomControloptions: {
النمط: google.maps.zoomcontrolstyle.large ،
الموضع: google.maps.controlposition.left_center
} ،
Scalecontrol: صحيح ،
Scalecontroloptions: {
الموضع: google.maps.controlposition.bottom_left
} ،
StreetViewControl: صحيح ،
StreetViewControloptions: {
الموضع: google.maps.controlposition.left_top
}
} ؛
/ * إنشاء خريطة جديدة للتطبيق */
MAP = جديد google.maps.map ($ ('#map') [0] ، Options) ؛
}
أساليب GetLocation و Watchlocation للحصول على معلومات تحديد المواقع.
وظيفة getLocation () {
؟
if (navigator.geolocation) {
Browsersupport = صحيح ؛
navigator.geolocation.getCurrentPosition (PlotLocation ، ReportProblem ، {timeout: 45000}) ؛
} آخر {
ReportProblem () ؛
}
}
وظيفة watchlocation () {
؟
if (navigator.geolocation) {
Browsersupport = صحيح ؛
navigator.geolocation.watchposition (PlotLocation ، ReportProblem ، {timeout: 45000}) ؛
} آخر {
ReportProblem () ؛
}
}
بعد الحصول على معلومات الموقع بنجاح ، اتصل على طريقة تحديد الموقع لعرض الموقع على خرائط Google.
وظيفة المؤامرة (الموضع) {
محاولات = 0 ؛
var point = new Google.maps.latlng (position.coords.latitude ، position.coords.longitude) ؛
var marker = جديد google.maps.marker ({
الموقف: نقطة
}) ؛
marker.setMap (MAP) ؛
map.setCenter (point) ؛
map.setzoom (15) ؛
}
عنوان التنزيل التجريبي: googlemapgeolocation.rar