Comentario: Este artículo presenta principalmente el ejemplo de posicionamiento HTML5 y mostrándolo en el mapa de Baidu. Los amigos que lo necesitan pueden referirse a él.
Al desarrollar la web o las aplicaciones web móviles, cuando se usa la API del mapa de Baidu, a menudo necesita obtener la ubicación actual a través del posicionamiento de teléfonos móviles y mostrarla en el centro del mapa, lo que requiere el uso de la función de geolocalización de HTML5.
navigator.geolocation.getCurrentPosition (devolución de llamada);
Después de que las coordenadas se obtengan con éxito, se ejecutará la devolución de llamada de la función de devolución de llamada; El parámetro del método de devolución de llamada son los puntos de coordenadas obtenidos; Luego, el mapa se puede inicializar, se pueden establecer los controles, los puntos centrales y los niveles de zoom, y luego se agrega la superposición del punto al mapa:
var map = new bmap.map ("mapdiv"); // mapdiv es la identificación del div que pone el mapa
MAP.AddControl (nuevo BMAP.NavigationControl ());
MAP.AddControl (nuevo BMAP.Scalecontrol ());
MAP.AddControl (nuevo BMAP.OverViewMapControl ());
map.centerandzoom (punto, 15); // El punto es el punto de coordenada, 15 es el nivel de zoom de mapa, el nivel máximo es 18
var puntermarker = new BMap.Marker (punto);
MAP.AdDoverlay (PointMarker);
Sin embargo, de hecho, esto no es suficiente, y los resultados mostrados no son precisos. Esto se debe a que las coordenadas obtenidas por GetCurrentPosition son coordenadas de latitud y longitud GPS, y las coordenadas del mapa de Baidu se convierten especialmente. Por lo tanto, se requiere un paso de conversión de coordenadas entre la obtención de coordenadas de posicionamiento e inicializar el mapa. Este método de conversión ya se proporciona en la API de Baidu. Se proporciona el método para convertir un reemplazo de punto o lote: una conversión de un solo punto requiere referencia y una conversión por lotes requiere referencia. Aquí, solo se necesita el primero:
BMAP.Convertor.Translate (GPSPoint, 0, devolución de llamada);
// GPSPoint: las coordenadas antes de la conversión, el segundo parámetro es el método de conversión, 0 significa que la coordenada GPS se convierte en coordenadas de Baidu, la función de devolución de llamada, el parámetro es el nuevo punto de coordenadas
El código detallado del ejemplo es el siguiente: (el AK en la cotización es la clave solicitada)
<! Doctype html>
<html lang = "zh-cn">
<Evista>
<meta content = "inicial-escala = 1.0, user-scalable = no" />
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<style type = "text/css">
*{
Altura: 100%; // Establecer la altura, de lo contrario no se mostrará
}
</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/conververor.js"> </script>
<script>
$ (function () {
navigator.geolocation.getCurrentPosition (traducePoint); // Posicionamiento
});
función traducePoint (posición) {
var currentLat = posicion.coords.latitude;
var currentLon = posicion.coords.nongitude;
var gpspoint = new BMap.Point (CurrentLon, CurrentLat);
BMAP.Convertor.Translate (GPSPoint, 0, InitMap); // Convertir coordenadas
}
función initMap (punto) {
// Inicializa el mapa
map = new BMap.map ("Map");
MAP.AddControl (nuevo BMAP.NavigationControl ());
MAP.AddControl (nuevo BMAP.Scalecontrol ());
MAP.AddControl (nuevo BMAP.OverViewMapControl ());
map.centerandzoom (punto, 15);
MAP.AdDoverlay (nuevo BMAP.Marker (Point))
}
</script>
</ablo>
<Body>
<div> </div>
</body>
</html>
Durante el proceso de desarrollo, creo que la velocidad de posicionamiento de la computadora es un poco lenta, y a menudo no puedo obtener coordenadas, por lo que no se puede mostrar el mapa. Se recomienda usar un teléfono móvil para probarlo, y el posicionamiento es más rápido.
Por supuesto, si solo desarrolla páginas web móviles, no necesita usar jQuery. El marco es demasiado grande, puede cambiar a otros marcos JS móviles livianos.