تعليق: يقدم هذا المقال مثالًا على تحديد موقع HTML5 وعرضه على خريطة Baidu. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
عند تطوير الويب المحمول أو WebApps ، عند استخدام API Baidu MAP ، تحتاج غالبًا إلى الحصول على الموقع الحالي من خلال تحديد موقع الهاتف المحمول وعرضه في المركز على الخريطة ، مما يتطلب استخدام وظيفة تحديد الموقع الجغرافي لـ HTML5.
navigator.geolocation.getCurrentPosition (رد الاتصال) ؛
بعد الحصول على الإحداثيات بنجاح ، سيتم تنفيذ رد اتصال وظيفة رد الاتصال ؛ معلمة طريقة رد الاتصال هي نقاط الإحداثيات التي تم الحصول عليها ؛ ثم يمكن تهيئة الخريطة ، ويمكن ضبط عناصر التحكم ونقاط المركز ومستويات التكبير ، ثم يضاف تراكب النقطة إلى الخريطة:
خريطة var = new bmap.map ("mapdiv") ؛ // mapDiv هو معرف DIV الذي يضع الخريطة
map.addcontrol (bmap.navigationControl ()) ؛
map.addcontrol (bmap.scaleControl () جديد) ؛
map.addcontrol (new bmap.overviewmapcontrol ()) ؛
Map.Centerandzoom (نقطة ، 15) ؛ // نقطة هي نقطة الإحداثيات ، 15 هو مستوى تكبير الخريطة ، والمستوى الأقصى هو 18
var pointmarker = new bmap.marker (point) ؛
map.addoverlay (pointmarker) ؛
ومع ذلك ، في الواقع ، هذا لا يكفي ، والنتائج المعروضة ليست دقيقة. وذلك لأن الإحداثيات التي تم الحصول عليها بواسطة GetCurrentPosition هي إحداثيات خطوط الطول والطول GPS ، ويتم تحويل إحداثيات خريطة Baidu خصيصًا. لذلك ، هناك حاجة إلى خطوة تحويل التنسيق بين الحصول على إحداثيات تحديد المواقع وتهيئة الخريطة. تم توفير طريقة التحويل هذه بالفعل في Baidu API. يتم توفير طريقة تحويل نقطة أو استبدال الدُفعة: يتطلب تحويل نقطة واحدة مرجعًا ، ويتطلب تحويل الدُفعات مرجعًا. هنا ، هناك حاجة إلى السابق فقط:
bmap.convertor.translate (GPSPoint ، 0 ، رد الاتصال) ؛
// GPSPoint: الإحداثيات قبل التحويل ، المعلمة الثانية هي طريقة التحويل ، 0 تعني أن إحداثيات GPS يتم تحويلها إلى إحداثيات BAIDU ، وظيفة رد الاتصال ، المعلمة هي نقطة الإحداثي الجديدة
الكود التفصيلي للمثال كما يلي: (AK في الاقتباس هو المفتاح المطبق لـ)
<! doctype html>
<html lang = "zh-cn">
<head>
أقل
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> </title>
<type type = "text/css">
*{
الارتفاع: 100 ٪ // قم بتعيين الارتفاع ، وإلا فلن يتم عرضه
}
</style>
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<script type = "text/javaScript" src = "http://api.map.baidu.com/api؟v=2.0&ak=·············> </script>
<script type = "text/javaScript" src = "http://developer.baidu.com/map/jsdemo/demo/convertor.js"> </script>
<script>
$ (function () {
navigator.geolocation.getCurrentPosition (TranslatePoint) ؛ // تحديد المواقع
}) ؛
وظيفة TranslatePoint (الموضع) {
var currentlat = position.coords.latitude ؛
var currentlon = position.coords.longitude ؛
var gpspoint = new bmap.point (currentlon ، currentLat) ؛
bmap.convertor.translate (gpspoint ، 0 ، initMap) ؛ // تحويل الإحداثيات
}
وظيفة initMap (point) {
// تهيئة الخريطة
الخريطة = جديد bmap.map ("الخريطة") ؛
map.addcontrol (bmap.navigationControl ()) ؛
map.addcontrol (bmap.scaleControl () جديد) ؛
map.addcontrol (new bmap.overviewmapcontrol ()) ؛
Map.Centerandzoom (Point ، 15) ؛
map.addoverlay (bmap.marker (point) الجديد)
}
</script>
</head>
<body>
<viv> </viv>
</body>
</html>
أثناء عملية التطوير ، أشعر أن سرعة تحديد موقع الكمبيوتر بطيئة بعض الشيء ، وغالبًا ما لا يمكنني الحصول على إحداثيات ، لذلك لا يمكن عرض الخريطة. يوصى باستخدام الهاتف المحمول لاختباره ، وتحديد المواقع أسرع.
بالطبع ، إذا قمت فقط بتطوير صفحات الويب المحمولة ، فلن تحتاج إلى استخدام jQuery. الإطار كبير جدًا ، يمكنك التبديل إلى أطر عمل JS الخفيفة الوزن الأخرى.