Kommentar: In diesem Artikel wird hauptsächlich das Beispiel der HTML5 -Positionierung vorgestellt und auf der Baidu -Karte angezeigt. Freunde, die es brauchen, können sich darauf beziehen.
Bei der Entwicklung mobiler Web- oder WebApps müssen Sie bei der Verwendung von Baidu MAP -API häufig den aktuellen Standort über die Mobiltelefonpositionierung erhalten und in der Mitte der Karte anzeigen, für die die Geolokalisierungsfunktion von HTML5 verwendet werden muss.
navigator.geolocation.getCurrentPosition (Callback);
Nachdem die Koordinaten erfolgreich erhalten wurden, wird der Rückruf von Rückruffunktionen ausgeführt. Der Parameter der Rückrufmethode ist die erhaltenen Koordinatenpunkte; Anschließend kann die Karte initialisiert werden, die Steuerelemente, Mittelpunkte und Zoompegel können festgelegt werden, und dann wird die Überlagerung des Punktes zur Karte hinzugefügt:
var map = new bmap.map ("mapDiv"); // MAPDIV ist die ID des DIV, die die Karte platziert
map.addControl (neue bmap.navigationControl ());
map.addControl (neue BMAP.ScaleControl ());
map.addControl (neue BMAP.OverviewMapControl ());
MAP.CenterAnzoom (Punkt, 15); // Punkt ist der Koordinatenpunkt, 15 ist die Map -Zoomebene, die maximale Ebene ist 18
var pointmarker = neuer BMAP.Marker (Punkt);
map.adDoverlay (Punktmarker);
Tatsächlich reicht dies jedoch nicht aus, und die angezeigten Ergebnisse sind nicht genau. Dies liegt daran, dass die durch GetCurrentPosition erhaltenen Koordinaten GPS -Breiten- und Längengradkoordinaten sind und die Koordinaten der Baidu -Karte speziell konvertiert werden. Daher ist ein Schritt der Koordinatenumwandlung zwischen der Erhalt von Positionierungskoordinaten und der Initialisierung der Karte erforderlich. Diese Konvertierungsmethode ist bereits in der Baidu -API bereitgestellt. Die Methode zum Konvertieren eines Punkt- oder Stapelersatzes wird bereitgestellt: Eine einzige Punktumwandlung erfordert eine Referenz, und für eine Stapelumwandlung muss eine Referenz erforderlich sind. Hier wird nur der erstere benötigt:
Bmap.convertor.translate (GPSPoint, 0, Rückruf);
// GPSPoint: Die Koordinaten vor der Konvertierung, der zweite Parameter ist die Konvertierungsmethode, 0 bedeutet, dass die GPS -Koordinate in Baidu -Koordinaten konvertiert wird, die Rückruffunktion, der Parameter ist der neue Koordinatenpunkt
Der detaillierte Code des Beispiels lautet wie folgt: (Der AK im Zitat ist der Schlüssel, für den angewendet wird)
<! DocType html>
<html lang = "zh-cn">
<kopf>
<meta content = "initial scale = 1.0, user-scalable = no" />
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<style type = "text/css">
*{{
Höhe: 100%; // Setzen Sie die Höhe, sonst wird sie nicht angezeigt
}
</style>
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<script type = "text/javaScript" src = "http://api.map.baidu.com/api?v=2.0&ak=············"> </script>
<script type = "text/javascript" src = "http://developer.baidu.com/map/jsdemo/demo/convertor.js"> </script>
<Script>
$ (function () {
navigator.geolocation.getCurrentPosition (TranslatePoint); //Positionierung
});
Funktion translatePoint (Position) {
var currentlat = Position.coords.latitude;
var currentlon = Position.coords.longitude;
var gppoint = new BMAP.Point (currentLon, currentLat);
Bmap.convertor.translate (gppoint, 0, initmap); // Koordinaten konvertieren
}
Funktion initmap (Punkt) {
// Initialisieren Sie die Karte
map = new bmap.map ("map");
map.addControl (neue bmap.navigationControl ());
map.addControl (neue BMAP.ScaleControl ());
map.addControl (neue BMAP.OverviewMapControl ());
MAP.CenterAnzoom (Punkt, 15);
map.adDoverlay (neuer BMAP.Marker (Punkt))
}
</script>
</head>
<body>
<div> </div>
</body>
</html>
Während des Entwicklungsprozesses bin ich der Meinung, dass die Computerpositionierungsgeschwindigkeit etwas langsam ist, und ich kann oft keine Koordinaten erhalten, sodass die Karte nicht angezeigt werden kann. Es wird empfohlen, ein Mobiltelefon zu verwenden, um es zu testen, und die Positionierung ist schneller.
Wenn Sie nur mobile Webseiten entwickeln, müssen Sie JQuery nicht verwenden. Das Framework ist zu groß. Sie können in andere leichte mobile JS -Frameworks wechseln.