Aqui eu apenas digo como usar a API do Google Maps. É considerado uma maneira de atrair atenção. Por algumas razões, o Google esteve longe de todos.
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<title> Geolocation </ititle>
<meta name = "viewport" content = "em escala inicial = 1.0, scalable usuário = não">
<meta charset = "utf-8">
<estilo>
html, corpo, #map-canvas {
margem: 0;
preenchimento: 0;
Altura: 100%;
}
</style>
<script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
<Cript>
var mapa;
var poly;
função inicialize () {
var mylatlng = new google.maps.latlng (31.1937077, 121.4158436);
Var Localizações = [
['Test1, precisão: 150m', 31.1937077, 121.4158436, 100],
['Test2, precisão: 150m', 31.2937077, 121.4158436, 100],
['Test3, precisão: 150m', 31.0937077, 121.2158436, 100],
['Test4, precisão: 150m', 31.3937077, 120.4158436, 100],
['Test5, precisão: 150m', 31.1637077, 120.4858436, 100],
['Test6, precisão: 150m', 31.1037077, 121.5158436, 100]
];
var mapoptions = {
Zoom: 13,
centro: mylatlng,
MapTypeID: google.maps.maptypeid.roadmap
};
mapa = novo google.maps.map (document.getElementById ('map-canvas'),
mapoptions);
// Configurações de linha
var polyoptions = {
Strokecolor: '#00ff00', // color
StrokeOpacity: 1.0, // transparência
StrokeWeight: 4 // Largura
}
poli = novo google.maps.polyline (polyoptions);
poli.setMap (mapa); // Carregar
/* Faça um loop para marcar todas as coordenadas*/
/*para (var i = 0; i <locations.length; i ++) {
var loc = [];
loc.push (locais [i] [1]);
loc.push (locais [i] [2]);
var path = poly.getPath (); // Obtenha as coordenadas da linha
path.push (novo google.maps.latlng (loc [0], loc [1])); // Adicionar coordenadas de marca às linhas
// Gere um ícone de tag
marcador = novo google.maps.marker ({
Posição: Novo Google.maps.latlng (loc [0], loc [1]),
Mapa: Mapa
// Ícone: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
});
}*/
var marcador, i, círculo;
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");
for (i = 0; i <locations.length; i ++) {
var loc = [];
loc.push (locais [i] [1]);
loc.push (locais [i] [2]);
var path = poly.getPath (); // Obtenha as coordenadas da linha
path.push (novo google.maps.latlng (loc [0], loc [1]));
var latlng = new google.maps.latlng (locais [i] [1], locais [i] [2]);
latlngbounds.extend (latlng);
if (locais [i] [0] .IndexOf ("[cache") == 0 || (Locais [i] [0] .IndexOf ("[múltiplo") == 0 && Localizações [i] [0] .IndexOf ("[cache")> = 0) {
marcador = novo google.maps.marker ({
Posição: Latlng,
Mapa: mapa,
Icon: iconyellow
});
var iw = '<div style = "font-size: 12px; word-wrap: break-word; word-break: break-all;"> <strong> <font color = "#ff0000">' + locais [i] [0] + '<font> </strong> <div>';
} outro {
marcador = novo google.maps.marker ({
Posição: Latlng,
Mapa: Mapa
});
var iw = '<div style = "font-size: 12px; word-wrap: break-word; break word: break-all;"> <strong> <font color = "#000000">' + locais [i] [0] + '<font> </strong> <div>';
}
iwarray [i] = iw;
google.maps.event.addlistener (Marker, 'mouseOver', (função (marcador, i) {
Return function () {
infowindow = new google.maps.infowindow ({
Conteúdo: Iwarray [i],
MaxWidth: 200,
Pixeloffset: novo google.maps.size (0, 0)
});
infowindow.open (mapa, marcador);
}
}) (marcador, i));
google.maps.event.addlistener (marcador, 'mouseout', function () {
infowindow.close ();
});
círculo = novo google.maps.circle ({
Mapa: mapa,
raio: localizações [i] [3],
FillColor: '#0000AA',
Fillopacity: 0.01,
StrokeWeight: 1,
Strokecolor: '#0000cc',
StrokeOpacity: 0,8
});
Circle.Bindto ('Centro', Marcador, 'Posição');
}
map.fitBounds (latlngbounds);
Var Livener = google.maps.event.addlisteneronce (mapa, "Idle", function ()
{
var zoomlevel = parseint (map.getzoom ());
IF (ZoomLevel> 13)
map.setzoom (13);
});
}
google.maps.event.adddomListener (janela, 'load', inicializar);
</script>
</head>
<Body>
<div id = "map-canvas"> </div>
</body>
</html>