Ici, je vous dis simplement comment utiliser l'API Google Maps. C'est considéré comme un moyen d'attirer l'attention. Pour certaines raisons, Google a été loin de tout le monde.
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<Title> Geolocation </Title>
<meta name = "Viewport" content = "initial-scale = 1.0, utilisateur-échec = no">
<meta charset = "utf-8">
<style>
html, corps, # map-canvas {
marge: 0;
rembourrage: 0;
hauteur: 100%;
}
</ style>
<script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </ script>
<cript>
var map;
var poly;
fonction initialize () {
var mylatlng = new Google.maps.latlng (31.1937077, 121.4158436);
Var Locations = [
['test1, précision: 150m', 31.1937077, 121.4158436, 100],
['test2, précision: 150m', 31.2937077, 121.4158436, 100],
['test3, précision: 150m', 31.0937077, 121.2158436, 100],
['test4, précision: 150m', 31.3937077, 120.4158436, 100],
['test5, précision: 150m', 31.1637077, 120.4858436, 100],
['test6, précision: 150m', 31.1037077, 121.5158436, 100]
]]
var mapoptions = {
Zoom: 13,
Centre: Mylatlng,
MapTypeid: google.maps.maptypeid.roadmap
};
map = new Google.maps.map (document.getElementById («map-canvas»),
MapOptions);
// Paramètres de ligne
var polyoptions = {
StrokeColor: '# 00FF00', // Couleur
TRAVOPACITY: 1.0, // Transparence
Poids-trait: 4 // largeur
}
poly = nouveau google.maps.polyline (polyoptions);
poly.setmap (carte); // Charger
/ * Boucle pour marquer toutes les coordonnées * /
/ * pour (var i = 0; i <locations.length; i ++) {
var loc = [];
loc.push (emplacements [i] [1]);
loc.push (emplacements [i] [2]);
var path = poly.getPath (); // Obtenez les coordonnées de la ligne
path.push (new Google.maps.latlng (loc [0], loc [1])); // ajouter des coordonnées de marque aux lignes
// Générer l'icône de balise
Marker = new Google.maps.marker ({{{{
Position: new Google.maps.latlng (loc [0], loc [1]),
Carte: carte
// icône: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
});
} * /
var marqueur, i, cercle;
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");
pour (i = 0; i <locations.length; i ++) {
var loc = [];
loc.push (emplacements [i] [1]);
loc.push (emplacements [i] [2]);
var path = poly.getPath (); // Obtenez les coordonnées de la ligne
path.push (new Google.maps.latlng (loc [0], loc [1]));
var latlng = new Google.maps.latlng (emplacements [i] [1], emplacements [i] [2]);
latlngbounds.extend (latlng);
if (emplacements [i] [0] .Indexof ("[cached") == 0 || (Locations [i] [0] .Indexof ("[multiple") == 0 && Locations [i] [0] .Indexof ("[Cached")> = 0)) {
Marker = new Google.maps.marker ({{{{
Position: latlng,
Carte: carte,
Icône: Ininewellow
});
var iw = '<div style = "font-size: 12px; word-wrap: break-word; word-brisel: break-all;"> <strong> <font color = "# ff0000">' + locations [i] [0] + '<font> </strong> <div>';
} autre {
Marker = new Google.maps.marker ({{{{
Position: latlng,
Carte: carte
});
var iw = '<div style = "font-size: 12px; word-wrap: break-word; word-brisel: Break-all;"> <strong> <font color = "# 000000">' + emplacements [i] [0] + '<font> </strong> <div>';
}
iWarray [i] = iw;
google.maps.event.addistener (Marker, 'Mouseover', (fonction (Marker, i) {
return function () {
infowindow = new Google.maps.infowindow ({
Contenu: iwarray [i],
Maxwidth: 200,
Pixeloffset: new Google.Maps.Size (0, 0)
});
infowindow.open (carte, marqueur);
}
}) (marqueur, i));
google.maps.event.addListener (Marker, 'Mouseout', function () {
infowindow.close ();
});
Circle = new Google.Maps.Circle ({{
Carte: carte,
rayon: emplacements [i] [3],
FillColor: '# 0000AA',
Fillopacity: 0,01,
poids trap: 1,
StrokeColor: '# 0000cc',
RAVOPACITY: 0,8
});
Circle.bindto («Centre», marqueur, «position»);
}
map.fitbounds (latlngbounds);
var écouteur = google.maps.event.addlisteneronce (map, "inactif", function ()
{
var zoomlevel = parseInt (map.getZoom ());
if (zoomlevel> 13)
map.setzoom (13);
});
}
google.maps.event.adddomListener (Window, «Load», initialize);
</cript>
</ head>
<body>
<div id = "map-canvas"> </div>
</docy>
</html>