suchen

Heim  >  Artikel  >  Web-Frontend  >  Die HTML5-Positionierung ruft den aktuellen Standort ab und zeigt ihn im Baidu-Tutorial an

Die HTML5-Positionierung ruft den aktuellen Standort ab und zeigt ihn im Baidu-Tutorial an

WBOY
WBOYOriginal
2016-05-16 15:47:262492Durchsuche

Bei der Entwicklung eines mobilen Webs oder einer Web-App ist es bei Verwendung der Baidu Map API häufig erforderlich, den aktuellen Standort über die Standortbestimmung des Mobiltelefons zu ermitteln und in der Mitte der Karte anzuzeigen. Dazu ist die Verwendung der Geolokalisierungsfunktion von HTML5 erforderlich.

Code kopieren
Der Code lautet wie folgt:

navigator.geolocation.getCurrentPosition( Rückruf);

Nachdem die Rückruffunktion erfolgreich abgerufen wurde, ist der Parameter der Rückrufmethode der erhaltene Koordinatenpunkt. Anschließend können Sie die Karte initialisieren und die Steuerung festlegen Punkt, Zoomstufe und dann Punkte zur Karte hinzufügen Overlay:

Code kopieren
Der Code lautet wie folgt:

var map = new 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 Zoomstufe der Karte und die maximale Stufe ist 18
var pointMarker = new BMap Marker(point);

Tatsächlich Dies reicht 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 speziell konvertiert werden. Daher ist zwischen dem Abrufen ein Schritt der Koordinatenkonvertierung erforderlich Die Positionierungskoordinaten und die Initialisierung der Karte wurden in der Baidu-API bereitgestellt, und die Methode zum Konvertieren einer Punkt- oder Stapelkonvertierung ist beides: Die Einzelpunktkonvertierung muss auf http://developer.baidu.com/ verwiesen werden. map/jsdemo/demo/convertor.js, die Stapelkonvertierung muss auf http://developer.baidu.com/map/jsdemo/demo/changeMore .js verweisen, hier wird nur ersteres benötigt:


Kopieren Sie den CodeDer Code lautet wie folgt:
BMap.Convertor.translate(gpsPoint, 0, callback) ;
//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 sind die neuen Koordinaten Klicken Sie auf

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


Code kopierenDer Der Code lautet wie folgt:
"viewport" content="initial-scale=1.0, user-scalable=no" />

wird nicht angezeigt
}