Kedudukan HTML5 mendapat lokasi semasa dan memaparkannya pada kemahiran tutorial Baidu map

Apabila membangunkan web mudah alih atau aplikasi web, apabila menggunakan API Peta Baidu, selalunya perlu mendapatkan lokasi semasa melalui kedudukan telefon mudah alih dan memaparkannya di tengah pada peta Ini memerlukan penggunaan fungsi geolokasi HTML5.

Salin kod

Kod tersebut adalah seperti berikut:

navigator.geolocation.getCurrentPosition( panggilan balik);

Setelah berjaya mendapatkan koordinat, fungsi panggil balik akan dilaksanakan; titik, aras zum, dan kemudian tambah titik pada Peta Tindanan:

Salin kod

Kod adalah seperti berikut:

var map = new BMap. Map("mapDiv");//mapDiv ialah id div tempat peta diletakkan
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl()); 15 ialah tahap zum peta, dan tahap maksimum ialah 18
var pointMarker = new BMap(point); , ini tidak mencukupi, dan hasil yang dipaparkan tidak tepat Ini kerana koordinat yang diperolehi oleh getCurrentPosition ialah Koordinat longitud dan latitud GPS, dan koordinat Peta Baidu ditukar secara khusus oleh itu, langkah penukaran koordinat diperlukan antara mendapatkan koordinat kedudukan dan memulakan peta Kaedah penukaran ini telah disediakan dalam API Baidu, dan kaedah menukar penukaran titik atau kelompok adalah Kedua-duanya disediakan: penukaran titik tunggal perlu merujuk kepada http://developer.baidu.com/ map/jsdemo/demo/convertor.js, penukaran kelompok perlu merujuk kepada http://developer.baidu.com/map/jsdemo/demo/changeMore .js, hanya yang pertama diperlukan di sini:

Salin kod

Kod adalah seperti berikut: BMap.Convertor.translate(gpsPoint, 0, panggil balik) ; //gpsPoint: koordinat sebelum penukaran, parameter kedua ialah kaedah penukaran, 0 bermakna koordinat gps ditukar kepada koordinat Baidu, fungsi panggil balik, parameter ialah koordinat baharu Klik

Kod terperinci contoh adalah seperti berikut: (ak dalam rujukan ialah kunci aplikasi)

Salin kod

kod adalah seperti berikut: "viewport" content="initial-scale=1.0, user-scalable=no" />

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini