Contoh kedudukan dan paparan html5 pada Baidu map_html5 kemahiran tutorial

Apabila membangunkan web mudah alih atau aplikasi web, apabila menggunakan API Peta Baidu, selalunya perlu untuk mendapatkan lokasi semasa melalui penentududukan 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( panggil balik);

Selepas berjaya mendapatkan koordinat, panggilan balik fungsi panggil balik akan dilaksanakan parameter kaedah panggil balik ialah titik koordinat yang diperolehi, kemudian anda boleh memulakan peta, menetapkan kawalan, titik tengah, tahap zum, dan kemudian menambah a tindanan titik pada peta:

Salin kod

Kod adalah seperti berikut:

var map = new BMap. Map(" mapDiv");//mapDiv ialah id div tempat peta diletakkan
map.addControl(BMap.NavigationControl() baharu);
map.addControl(BMap.ScaleControl()) ;
map.addControl (BMap.OverviewMapControl() baharu);
map.centerAndZoom(point, 15);//point ialah titik koordinat, 15 ialah tahap zum peta, tahap maksimum ialah 18
var pointMarker = new BMap.Marker(point );
map.addOverlay(pointMarker);

Namun, ini sebenarnya 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 telah ditukar khas mendapatkan koordinat kedudukan dan memulakan penukaran koordinat satu langkah diperlukan antara peta Kaedah penukaran ini telah disediakan dalam API Baidu Kaedah untuk menukar satu titik atau penukaran kumpulan disediakan: penukaran titik tunggal perlu merujuk kepada http://pembangun .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

Kodnya 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 titik koordinat baharu

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

Salin kod

Kod tersebut adalah seperti berikut:

<script><br> $(function( ){<br> navigator .geolocation.getCurrentPosition(translatePoint); //Positioning<br> });<br> fungsi translatePoint(position){<br> var currentLat = position.coords.latitude;<br> var currentLon = position.coords.longitude; <br> var gpsPoint = new BMap.Point(currentLon, currentLat);<br> BMap.Convertor.translate(gpsPoint, 0, initMap); //Tukar koordinat<br> }<br> fungsi initMap(point){<br> //Initialize the map<br> map = new BMap.Map("map");<br> map.addControl(new BMap.NavigationControl());<br> map.addControl( BMap.ScaleControl()) baharu ;<br> map.addControl(BMap.OverviewMapControl() baharu);<br> map.centerAndZoom(point, 15);<br> map.addOverlay(BMap.Marker(point)) <br> }<br> </script>

< /body>
< ;/html>

Semasa proses pembangunan, saya merasakan kelajuan kedudukan komputer agak perlahan. Selalunya mustahil untuk mendapatkan koordinat dan peta tidak dapat dipaparkan untuk menguji, seperti kedudukannya lebih pantas.

Sudah tentu, jika anda hanya membangunkan halaman web mudah alih, anda tidak perlu menggunakan jQuery Bingkainya terlalu besar, jadi anda boleh menggunakan rangka kerja js mudah alih lain yang ringan.