Beispiel für die HTML5-Positionierung und -Anzeige auf der Baidu-Karte_HTML5-Tutorial-Fähigkeiten

Bei der Entwicklung eines mobilen Webs oder einer Webanwendung ist es bei Verwendung der Baidu Map API häufig erforderlich, den aktuellen Standort über die Positionierung des Mobiltelefons zu ermitteln und ihn in der Mitte der Karte anzuzeigen. Dies erfordert die Verwendung der Geolokalisierungsfunktion von HTML5.

Code kopieren

Der Code lautet wie folgt:

navigator.geolocation.getCurrentPosition( Rückruf);

Nachdem die Koordinaten erfolgreich abgerufen wurden, wird die Rückruffunktion ausgeführt. Der Parameter der Rückrufmethode ist der erhaltene Koordinatenpunkt. Anschließend können Sie die Karte initialisieren, die Steuerung, den Mittelpunkt und die Zoomstufe festlegen und dann einen hinzufügen Punkt-Overlay zur Karte:

Code kopieren

Der Code lautet wie folgt:

var map = neue BMap. Map(" mapDiv");//mapDiv ist die ID des Div, in dem die Karte platziert ist
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl()) ;
map.addControl (new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);//point ist der Koordinatenpunkt, 15 ist die Kartenzoomstufe, die maximale Stufe ist 18
var pointMarker = new BMap.Marker(point );
map.addOverlay(pointMarker);

Tatsächlich reicht dies jedoch nicht aus und die angezeigten Ergebnisse sind nicht genau. Dies liegt daran, dass die von getCurrentPosition erhaltenen Koordinaten GPS-Längen- und Breitengradkoordinaten sind und die Koordinaten von Baidu Map daher speziell konvertiert wurden Abrufen der Positionierungskoordinaten und Initialisieren. Zwischen Karten ist eine Koordinatenkonvertierung in einem Schritt erforderlich. Diese Konvertierungsmethode ist bereits in der Baidu-API verfügbar. Es stehen Methoden für die Konvertierung eines Einzelpunkts oder einer Stapelkonvertierung zur Verfügung: Die Einzelpunktkonvertierung muss auf http://developer verweisen .baidu.com/map/ jsdemo/demo/convertor.js, Batch-Konvertierung muss auf http://developer.baidu.com/map/jsdemo/demo/changeMore.js verwiesen werden, hier wird nur ersteres benötigt:

Code kopieren

Der Code lautet wie folgt:

BMap.Convertor.translate( gpsPoint, 0, Rückruf);
//gpsPoint: Koordinaten vor der Konvertierung, der zweite Parameter ist die Konvertierungsmethode, 0 bedeutet, dass die GPS-Koordinaten in Baidu-Koordinaten konvertiert werden, Rückruffunktion, der Parameter ist der neue Koordinatenpunkt

Der detaillierte Code des Beispiels lautet wie folgt: (das ak in der Referenz ist der Anwendungsschlüssel)

Code kopieren

Der Code lautet wie folgt:

<script><br> $(function( ){<br> navigator .geolocation.getCurrentPosition(translatePoint); //Positioning<br> });<br> function translatorPoint(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); // Koordinaten konvertieren<br> }<br> Funktion initMap(point){<br> //Initialisiere die Karte<br> map = new BMap.Map("map");<br> map.addControl(new BMap.NavigationControl());<br> map.addControl( new BMap.ScaleControl()) ;<br> map.addControl(new BMap.OverviewMapControl());<br> map.centerAndZoom(point, 15);<br> map.addOverlay(new BMap.Marker(point)) <br> }<br> </script>

< /body>
< ;/html>

Während des Entwicklungsprozesses hatte ich das Gefühl, dass die Positionierungsgeschwindigkeit des Computers etwas langsam war. Es war oft unmöglich, Koordinaten zu erhalten und die Karte konnte nicht angezeigt werden, da die Positionierung nicht möglich ist Schneller.

Wenn Sie nur mobile Webseiten entwickeln, müssen Sie jQuery natürlich nicht verwenden. Der Rahmen ist zu groß, sodass Sie andere leichte mobile JS-Frameworks verwenden können.