ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำตัวอย่างของการวางตำแหน่ง HTML5 และแสดงบนแผนที่ Baidu เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
เมื่อพัฒนาเว็บมือถือหรือ WebApps เมื่อใช้ Baidu Map API คุณมักจะต้องได้รับตำแหน่งปัจจุบันผ่านการวางตำแหน่งโทรศัพท์มือถือและแสดงในศูนย์บนแผนที่ซึ่งต้องใช้ฟังก์ชั่น geolocation ของ HTML5
Navigator.geolocation.getCurrentPosition (การโทรกลับ);
หลังจากได้รับพิกัดสำเร็จแล้วฟังก์ชั่นการเรียกกลับการโทรกลับจะถูกเรียกใช้งาน พารามิเตอร์ของวิธีการโทรกลับเป็นจุดพิกัดที่ได้รับ จากนั้นสามารถเริ่มต้นแผนที่การควบคุมจุดกึ่งกลางและระดับการซูมสามารถตั้งค่าได้จากนั้นจะเพิ่มการซ้อนทับของจุดลงในแผนที่:
var map = ใหม่ bmap.map ("mapdiv"); // mapdiv เป็น id ของ div ที่วางแผนที่
map.addControl (ใหม่ bmap.navigationControl ());
map.addcontrol (ใหม่ bmap.scalecontrol ());
map.addcontrol (ใหม่ bmap.overviewmapcontrol ());
map.centerandzoom (จุด, 15); // จุดคือจุดพิกัด, 15 คือระดับการซูมแผนที่ระดับสูงสุดคือ 18
var pointmarker = ใหม่ bmap.marker (จุด);
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 content = "เริ่มต้น = 1.0, scalable ผู้ใช้ = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<style 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 = ใหม่ bmap.point (currentlon, currentlat);
bmap.convertor.translate (gpspoint, 0, initmap); // แปลงพิกัด
-
ฟังก์ชั่น initmap (จุด) {
// เริ่มต้นแผนที่
MAP = ใหม่ bmap.map ("แผนที่");
map.addControl (ใหม่ bmap.navigationControl ());
map.addcontrol (ใหม่ bmap.scalecontrol ());
map.addcontrol (ใหม่ bmap.overviewmapcontrol ());
map.centerandzoom (จุด, 15);
map.addoverlay (ใหม่ bmap.marker (จุด))
-
</script>
</head>
<body>
<div> </div>
</body>
</html>
ในระหว่างกระบวนการพัฒนาฉันรู้สึกว่าความเร็วในการวางตำแหน่งคอมพิวเตอร์ช้าไปหน่อยและฉันมักจะไม่ได้รับพิกัดดังนั้นแผนที่ไม่สามารถแสดงได้ ขอแนะนำให้ใช้โทรศัพท์มือถือเพื่อทดสอบและการวางตำแหน่งจะเร็วขึ้น
แน่นอนถ้าคุณพัฒนาหน้าเว็บมือถือเท่านั้นคุณไม่จำเป็นต้องใช้ jQuery เฟรมเวิร์กมีขนาดใหญ่เกินไปคุณสามารถเปลี่ยนไปใช้เฟรมเวิร์ก JS มือถือน้ำหนักเบาอื่น ๆ ได้