Aquí solo te digo cómo usar la API de Google Maps. Se considera una forma de atraer la atención. Por algunas razones, Google ha estado lejos de todos.
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> Geolocation </title>
<Meta name = "Viewport" Content = "Initial-Scale = 1.0, user-Scalable = no">
<meta charset = "utf-8">
<estilo>
html, cuerpo, #map-canvas {
margen: 0;
relleno: 0;
Altura: 100%;
}
</style>
<script src = "https://maps.googleapis.com/maps/api/js?v=3.EXP&sensor=false"> </script>
<script>
mapa var;
var poli;
función inicialize () {
var mylatlng = nuevo Google.maps.latlng (31.1937077, 121.4158436);
ubicaciones var = [
['Test1, Precisión: 150m', 31.1937077, 121.4158436, 100],
['Test2, Precisión: 150m', 31.2937077, 121.4158436, 100],
['Test3, Precisión: 150m', 31.0937077, 121.2158436, 100],
['Test4, Precisión: 150m', 31.3937077, 120.4158436, 100],
['Test5, Precisión: 150m', 31.1637077, 120.4858436, 100],
['Test6, Precisión: 150m', 31.1037077, 121.5158436, 100]
];
var mapOptions = {
Zoom: 13,
Centro: mylatlng,
MapTypeid: Google.Maps.MapTypeid.Roadmap
};
MAP = nuevo Google.maps.map (document.getElementById ('map-canvas'),
mapOptions);
// Configuración de línea
var poliOptions = {
Strokecolor: '#00ff00', // color
Strokeopacity: 1.0, // Transparencia
Peso de accidente cerebrovascular: 4 // ancho
}
poly = new Google.maps.Polyline (Polyoptions);
Poly.setMap (mapa); // Carga
/* Bucle para marcar todas las coordenadas*/
/*for (var i = 0; i <ubicación.length; i ++) {
var loc = [];
loc.push (ubicaciones [i] [1]);
loc.push (ubicaciones [i] [2]);
ruta var = poly.getPath (); // Obtener las coordenadas de la línea
Path.push (nuevo Google.maps.latlng (loc [0], loc [1])); // Agregar coordenadas de marca a las líneas
// Generar ícono de la etiqueta
marcador = nuevo Google.Maps.Marker ({
Posición: nuevo google.maps.latlng (loc [0], loc [1]),
Mapa: mapa
// icon: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
});
}*/
Var Marker, I, Circle;
var iwarray = [];
var infowindow;
var latlngBounds = new Google.maps.latlngBounds ();
var iconyellow = new Google.maps.markerImage ("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");
para (i = 0; i <ubicación.length; i ++) {
var loc = [];
loc.push (ubicaciones [i] [1]);
loc.push (ubicaciones [i] [2]);
ruta var = poly.getPath (); // Obtener las coordenadas de la línea
Path.push (nuevo Google.maps.latlng (loc [0], loc [1]));
var latlng = nuevo Google.maps.latlng (ubicaciones [i] [1], ubicaciones [i] [2]);
latlngBounds.extend (latlng);
if (ubicaciones [i] [0] .indexof ("[cached") == 0 || (ubicaciones [i] [0] .indexof ("[múltiple") == 0 && ubicaciones [i] [0] .indexof ("[cached")> = 0)) {
marcador = nuevo Google.Maps.Marker ({
Posición: latlng,
Mapa: mapa,
icono: iconyellow
});
var iw = '<div style = "font-size: 12px; word-wrap: break-word; word-break: break-all;"> <strong> <font color = "#ff0000">' + ubicaciones [i] [0] + '<font> </strong> <div>';
} demás {
marcador = nuevo Google.Maps.Marker ({
Posición: latlng,
Mapa: mapa
});
var iw = '<div style = "font-size: 12px; word-wrap: break-word; word-break: break-all;"> <strong> <font color = "#000000">' + ubicaciones [i] [0] + '<font> </strong> <div>';
}
iwarray [i] = iw;
Google.maps.event.addListener (Marker, 'Mouseover', (function (Marker, I) {
Función de retorno () {
infowindow = new Google.maps.infowindow ({
Contenido: iwarray [i],
MaxWidth: 200,
Pixeloffset: nuevo Google.maps.size (0, 0)
});
infowindow.open (mapa, marcador);
}
}) (marcador, i));
Google.maps.event.addListener (Marker, 'Mouseout', function () {
infowindow.close ();
});
círculo = nuevo Google.maps.circle ({
Mapa: mapa,
radio: ubicaciones [i] [3],
FillColor: '#0000AA',
Fillopacity: 0.01,
Peso de accidente cerebrovascular: 1,
Strokecolor: '#0000CC',
Strokeopacidad: 0.8
});
circle.bindto ('centro', marcador, 'posición');
}
map.fitBounds (latlngBounds);
VAR LOYER = Google.maps.event.addListenerOnce (mapa, "inactivo", function ()
{
var zoomLevel = parseInt (map.getZoom ());
if (ZoomLevel> 13)
MAP.SetZoom (13);
});
}
google.maps.event.adddomListener (ventana, 'cargar', inicializar);
</script>
</ablo>
<Body>
<div id = "map-canvas"> </div>
</body>
</html>