Komentar: Artikel ini terutama memperkenalkan contoh penentuan posisi HTML5 dan menampilkannya di peta Baidu. Teman yang membutuhkannya bisa merujuknya.
Saat mengembangkan web atau WebApps seluler, saat menggunakan Baidu Map API, Anda sering perlu mendapatkan lokasi saat ini melalui pemosisian ponsel dan menampilkannya di pusat di peta, yang membutuhkan penggunaan fungsi geolokasi HTML5.
navigator.geolocation.getCurrentPosition (callback);
Setelah koordinat berhasil diperoleh, callback callback callback akan dieksekusi; Parameter metode panggilan balik adalah titik koordinat yang diperoleh; Kemudian peta dapat diinisialisasi, kontrol, titik tengah, dan tingkat zoom dapat diatur, dan kemudian overlay titik ditambahkan ke peta:
var map = bmap.map baru ("mapDiv"); // mapDiv adalah id div yang menempatkan peta
peta.addControl (bmap.navigationControl baru ());
Map.AddControl (BMAP.ScaleControl ()) baru;
Map.AddControl (BMAP.OverviewMapControl ()) baru;
peta.centerandzoom (titik, 15); // titik adalah titik koordinat, 15 adalah level zoom peta, level maksimum adalah 18
var pointmarker = bmap.marker baru (point);
peta.addoverlay (pointmarker);
Namun, pada kenyataannya, ini tidak cukup, dan hasil yang ditampilkan tidak akurat. Ini karena koordinat yang diperoleh dengan GetCurrentPosition adalah GPS Latitude dan bujur koordinat, dan koordinat peta Baidu secara khusus dikonversi. Oleh karena itu, langkah konversi koordinat diperlukan antara mendapatkan koordinat penentuan posisi dan menginisialisasi peta. Metode konversi ini sudah disediakan di Baidu API. Metode mengonversi penggantian titik atau batch disediakan: konversi titik tunggal membutuhkan referensi, dan konversi batch memerlukan referensi. Di sini, hanya yang pertama yang diperlukan:
Bmap.convertor.translate (GPSPoint, 0, callback);
// GPSPoint: Koordinat sebelum konversi, parameter kedua adalah metode konversi, 0 berarti bahwa koordinat GPS dikonversi menjadi koordinat Baidu, fungsi panggilan balik, parameter adalah titik koordinat baru
Kode terperinci dari contoh ini adalah sebagai berikut: (AK dalam kutipan adalah kunci yang diterapkan)
<! Doctype html>
<html lang = "zh-cn">
<head>
<meta content = "skala awal = 1.0, skala pengguna = tidak" />
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> </title>
<type style = "text/css">
*{
Tinggi: 100%; // atur ketinggiannya, jika tidak, itu tidak akan ditampilkan
}
</tyle>
<skrip src = "http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<type script = "Text/JavaScript" src = "http://api.map.baidu.com/api?v=2.0&ak=···········"> </skrip>
<type script = "Text/JavaScript" src = "http://developer.baidu.com/map/jsdemo/demo/convertor.js"> </script>
<script>
$ (function () {
navigator.geolocation.getCurrentPosition (translatePoint); // Posisikan
});
fungsi translatePoint (position) {
var currentlat = position.coords.latitude;
var currentlon = position.coords.longitude;
var gpspoint = bmap.point baru (currentlon, currentlat);
Bmap.convertor.translate (GPSPoint, 0, initmap); // Konversi koordinat
}
fungsi initmap (point) {
// Inisialisasi peta
peta = bmap.map baru ("peta");
peta.addControl (bmap.navigationControl baru ());
Map.AddControl (BMAP.ScaleControl ()) baru;
Map.AddControl (BMAP.OverviewMapControl ()) baru;
Map.Centerandzoom (titik, 15);
Map.Addoverlay (bmap.marker baru (point))
}
</script>
</head>
<body>
<div> </div>
</body>
</html>
Selama proses pengembangan, saya merasa bahwa kecepatan penentuan posisi komputer agak lambat, dan saya sering tidak dapat memperoleh koordinat, sehingga peta tidak dapat ditampilkan. Disarankan untuk menggunakan ponsel untuk mengujinya, dan posisinya lebih cepat.
Tentu saja, jika Anda hanya mengembangkan halaman web seluler, Anda tidak perlu menggunakan jQuery. Kerangka kerja ini terlalu besar, Anda dapat beralih ke kerangka JS seluler ringan lainnya.