Comentario: Este guarnición acaba de comenzar a aprender HTML5, y ahora está bastante interesado en la geolocalización. La función básica de posicionamiento de mapas se implementa en combinación con la API de Google Map. Los siguientes pasos se utilizan principalmente: obtenga la ubicación geográfica actual y llame a la API de Google Map para obtener la información de ubicación actual.
Esta guarnición acaba de comenzar a aprender HTML5, y ahora está bastante interesado en la geolocalización, y combina la API de Google Map para implementar funciones básicas de posicionamiento de mapas.1. Obtenga la ubicación geográfica actual
Llame al método nulo getCurrentPosition (OnSuccess, OnError, Opciones);
Donde OnSuccess es una función de devolución de llamada ejecutada cuando la información de ubicación actual es exitosa, OnError es una función de devolución de llamada ejecutada cuando fallan la información de ubicación actual, las opciones son algunas listas familiares opcionales. El segundo y tercer parámetros son atributos opcionales.
En la función de devolución de llamada OnSuccess, la posición del parámetro se usa para representar un objeto de posición específico y representar la posición actual. Tiene las siguientes propiedades:
• Latitud: la latitud de la ubicación geográfica actual.
• Longitud: la longitud de la ubicación geográfica actual.
• Altitud: la altitud de la ubicación actual (nula si no se puede recuperar).
• Precisión: precisión (en metros) de la latitud y longitud obtenidas.
• Altitudeaccancancia: la longitud (en metros) de la altitud obtenida.
• Encabezado: la dirección del dispositivo. Está representado por un ángulo de rotación en el sentido de las agujas del reloj frente a la dirección hacia adelante (nula si no se puede recuperar).
• Velocidad: la velocidad hacia adelante del dispositivo (en metros/segundo, nula si no se puede recuperar).
• Marca de tiempo: el momento en que obtienes información de geolocalización.
En la función de devolución de llamada OnError, se utiliza el parámetro de error. Tiene las siguientes propiedades:
• Código: Código de error, con el siguiente valor.
1. El usuario rechazó el servicio de ubicación (el valor del atributo es 1);
2. La información de ubicación no se puede obtener (el valor del atributo es 2);
3. Obtenga el error de tiempo de espera de información (el valor de la propiedad es 3).
• Mensaje: cadena, que contiene información de error específica.
En el parámetro de opciones, las propiedades opcionales son las siguientes:
• Habilitar laomalimentación: si se requiere información de geolocalización de alta precisión.
• Tiempo de espera: establezca el tiempo de tiempo de espera (en milisegundos).
• Máxima: el tiempo válido (en milisegundos) para la información de geolocalización de caché.
Tenga en cuenta que debe escribir el siguiente código para determinar si el navegador admite HTML5 para obtener información de ubicación geográfica, para ser compatible con los navegadores que no fueron compatibles anteriormente.
if (navigator.geolocation) {
// Obtener la información de ubicación geográfica actual
navigator.geolocation.getCurrentPosition (Onsuccess, OnError, Opciones);
} demás {
alerta ("Su navegador no admite HTML5 para obtener información de geolocalización");
}
2. Llame a la API de Google Map para obtener información de ubicación actual
Primero, debe hacer referencia al archivo de script de la API de Google Map en la página. El método de importación es el siguiente.
<script type = "text/javaScript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
En segundo lugar, establezca los parámetros del mapa, y el método de configuración es el siguiente.
// Especifique un punto de coordenada en el mapa de Google, y también especifique las coordenadas horizontales y verticales del punto de coordenadas.
var latlng = nuevo Google.maps.latlng (coords.latitude, coords.nongitude);
var myOptions = {
Zoom: 14, // Establezca el aumento
Centro: latlng, // Establezca el punto central del mapa en el punto de coordenadas especificado
maptypeid: google.maps.maptypeid.roadmap // especificar el tipo de mapa
};
Finalmente, cree un mapa y muestrelo en la página, el método de creación es el siguiente
// Crear un mapa y mostrarlo en el mapa de la página
var map = new Google.maps.map (document.getElementById ("map"), myOptions);
Al final, se presentan todos los códigos para este ejemplo. El código se muestra a continuación.
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Obtenga la ubicación actual y visualelo en Google Maps </title>
<script type = "text/javaScript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type = "text/javaScript">
función init () {
if (navigator.geolocation) {
// Obtener la ubicación geográfica actual
navigator.geolocation.getCurrentPosition (función (posición) {
var coords = posicion.coords;
//console.log(position);
// Especifique un punto de coordenada en el mapa de Google, y también especifique las coordenadas horizontales y verticales del punto de coordenadas.
var latlng = nuevo Google.maps.latlng (coords.latitude, coords.nongitude);
var myOptions = {
Zoom: 14, // Establezca el aumento
Centro: latlng, // Establezca el punto central del mapa en el punto de coordenadas especificado
maptypeid: google.maps.maptypeid.roadmap // especificar el tipo de mapa
};
// Crear un mapa y mostrarlo en el mapa de la página
var map = new Google.maps.map (document.getElementById ("map"), myOptions);
// Crear marcas en el mapa
var marcador = nuevo google.maps.marker ({
Posición: latlng, // Haga clic en las coordenadas establecidas arriba
Mapa: mapa // Establezca esta anotación en el mapa que acaba de crear
});
// Etiqueta de ventana de solicitud
var infowindow = new Google.maps.infowindow ({
Contenido: "Ubicación actual: <br/> Long:" + latlng.lat () + "<br/> dimensión:" + latlng.lng () // mensaje de inmediato en el formulario de solicitud
});
// Abra la ventana de inmediato
infowindow.open (mapa, marcador);
},
función (error) {
// Error de procesamiento
switch (error.code) {
Caso 1:
alerta ("Servicio de ubicación denegado");
romper;
Caso 2:
alerta ("La información de ubicación no se puede obtener por el momento");
romper;
Caso 3:
alerta ("Obtenga tiempo de espera de información");
romper;
por defecto:
alerta ("Error desconocido");
romper;
}
});
} demás {
alerta ("Su navegador no admite HTML5 para obtener información de geolocalización");
}
}
</script>
</ablo>
<Body>
<div> </div>
</body>
</html>