Comentario: Hoy combinaremos la geolocalización HTML5 para desarrollar una pequeña aplicación. Los amigos interesados pueden aprender al respecto. Si hay alguna deficiencia, espero que el héroe te dé consejos.
Hoy combinaremos la geolocalización de HTML5 con Google Maps para desarrollar una pequeña aplicación. Dirección API de Google Maps: https://developers.google.com/maps/documentation/javascript/?hl=zh-cn.Para llamar a Google Maps, la implementación debe agregar una referencia JS <script type = text/javaScript src =? Sensor = falso> </script>, donde el significado específico del parámetro del sensor:
Para usar la API de Google Maps, debe indicar si su aplicación usa sensores (como localizadores GPS) en cualquier Maps API Biblioteca o solicitud de servicio para determinar dónde está el usuario. Esto es especialmente importante para los dispositivos móviles. Si su aplicación API de Google Maps usa cualquier forma de sensor para determinar la ubicación del dispositivo que accede a su aplicación, debe declarar esto configurando el valor del parámetro del sensor en verdadero.
La parte HTML es relativamente simple, solo necesita preparar un DIV:
<Body>
<div>
</div>
</body>
El marco del código JS es el siguiente:
<script type = "text/javaScript">
mapa var;
var browserSupport = false;
intentos var = 0;
$ (documento) .Ready (function () {
// Inicializa el mapa
InitMap ();
//posición
getLocation ();
// Seguimiento de ubicación
watchlocation ();
});
función initMap () {
/ * Establezca todas las opciones para el mapa */
opciones var = {
};
/ * Crear un nuevo mapa para la aplicación */
map = nuevo Google.maps.map ($ ('#map') [0], opciones);
}
/*
* Si el objeto de geolocalización W3C está disponible, entonces obtenga la actual
* Ubicación, de lo contrario informa el problema
*/
función getLocation () {
}
function watchLocation () {
}
/ * Traza la ubicación en el mapa y acerca a él */
función platlocation (posición) {
}
/ * Informe cualquier error usando esta función */
función informarproblem (e) {
}
</script>
El método InitMap es llamar a la API de Google Maps para inicializar el mapa. Necesita establecer el objeto Opciones y usarlo al llamar a la inicialización del mapa.
función initMap () {
/ * Establezca todas las opciones para el mapa */
opciones var = {
Zoom: 4,
Centro: nuevo Google.maps.latlng (38.6201, -90.2003),
MAPTYPEID: Google.Maps.MapTypeid.Roadmap,
maptypecontrol: verdadero,
MAPTYPECONTROLOPTIONS: {
Estilo: google.maps.maptypecontrolstyle.horizontal_bar,
Posición: Google.Maps.ControlPosition.Bottom_center
},
pancontrol: verdadero,
pancontroloptions: {
Posición: Google.Maps.ControlPosition.top_right
},
ZoomControl: Verdadero,
ZoomControloptions: {
Estilo: google.maps.zoomControlstyle.large,
Posición: Google.Maps.ControlPosition.Ltft_Center
},
Scalecontrol: verdadero,
Scalecontroloptions: {
Posición: Google.Maps.Controlposition.Bottom_left
},
StreetViewControl: Verdadero,
StreetViewControloptions: {
Posición: Google.Maps.ControlPosition.Ltft_top
}
};
/ * Crear un nuevo mapa para la aplicación */
map = nuevo Google.maps.map ($ ('#map') [0], opciones);
}
Métodos de getLocation y WatchLocation para obtener información de posicionamiento.
función getLocation () {
/ * Compruebe si el navegador admite la API de geolocalización W3C */
if (navigator.geolocation) {
browserSupport = true;
navigator.geolocation.getCurrentPosition (platlocation, reportproblem, {timeout: 45000});
} demás {
informarproblem ();
}
}
function watchLocation () {
/ * Compruebe si el navegador admite la API de geolocalización W3C */
if (navigator.geolocation) {
browserSupport = true;
navigator.geolocation.watchPosition (platlocation, reportproblem, {timeout: 45000});
} demás {
informarproblem ();
}
}
Después de obtener con éxito la información de ubicación, llame al método PlotLocation para mostrar la ubicación en Google Maps.
función platlocation (posición) {
intentos = 0;
Var Point = nuevo Google.maps.latlng (posicion.coords.latitude, posicion.coords.nongitude);
var marcador = nuevo google.maps.marker ({
Posición: punto
});
Marker.setMap (mapa);
map.setCenter (punto);
MAP.SetZoom (15);
}
Dirección de descarga de demostración: googlemapgeolocation.rar