Di sini saya hanya memberi tahu Anda cara menggunakan API Google Maps. Ini dianggap sebagai cara untuk menarik perhatian. Karena beberapa alasan, Google telah jauh dari semua orang.
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> geolokasi </title>
<meta name = "viewport" content = "skala awal = 1.0, skala pengguna = tidak">
<meta charset = "UTF-8">
<tyle>
html, body, #peta-canvas {
Margin: 0;
Padding: 0;
Tinggi: 100%;
}
</tyle>
<skrip src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
<script>
peta var;
var poly;
fungsi initialize () {
var mylatlng = google.maps.latlng baru (31.1937077, 121.4158436);
Lokasi var = [
['test1, akurasi: 150m', 31.1937077, 121.4158436, 100],
['test2, akurasi: 150m', 31.2937077, 121.4158436, 100],
['test3, akurasi: 150m', 31.0937077, 121.2158436, 100],
['test4, akurasi: 150m', 31.3937077, 120.4158436, 100],
['test5, akurasi: 150m', 31.1637077, 120.4858436, 100],
['test6, akurasi: 150m', 31.1037077, 121.5158436, 100]
];
var mapoptions = {
Zoom: 13,
Tengah: mylatlng,
maptypeId: google.maps.maptypeid.roadmap
};
peta = google.maps.map baru (document.geteLementById ('peta-canvas'),
mapoptions);
// Pengaturan garis
var polyoptions = {
Strokecolor: '#00ff00', // warna
StrokePacity: 1.0, // Transparansi
Strokeweight: 4 // lebar
}
poli = google.maps.polyline (polyoptions) baru;
poly.setmap (peta); // Memuat
/* Loop untuk menandai semua koordinat*/
/*untuk (var i = 0; i <locations.length; i ++) {
var loc = [];
loc.push (lokasi [i] [1]);
loc.push (lokasi [i] [2]);
var path = poly.getPath (); // Dapatkan koordinat garis
Path.push (Google.maps.latlng baru (loc [0], loc [1])); // tambahkan koordinat tanda ke baris
// Hasilkan ikon tag
marker = google.maps.marker baru ({
Posisi: google.maps.latlng baru (loc [0], loc [1]),
Peta: Peta
// Ikon: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
});
}*/
Var Marker, I, Circle;
var iwarray = [];
var infowindow;
var latlngbounds = google.maps.latlngbounds () baru;
var iconyellow = google.maps.markerimage baru ("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");
untuk (i = 0; i <locations.length; i ++) {
var loc = [];
loc.push (lokasi [i] [1]);
loc.push (lokasi [i] [2]);
var path = poly.getPath (); // Dapatkan koordinat garis
Path.push (Google.maps.latlng baru (loc [0], loc [1]));
var latlng = google.maps.latlng baru (lokasi [i] [1], lokasi [i] [2]);
latlngbounds.extend (latlng);
if (lokasi [i] [0] .indexof ("[cacheed") == 0 || (lokasi [i] [0] .indexof ("[multipel") == 0 && Lokasi [i] [0] .indexOf ("[cacheed")> = 0)) {
marker = google.maps.marker baru ({
Posisi: Latlng,
Peta: peta,
Ikon: Iconyellow
});
var iw = '<div style = "font-size: 12px; word-wrap: break-word; word-break: break-all;"> <strong> <font color = "#ff0000">' + Lokasi [i] [0] + '<font> </strong> <vov>';
} kalau tidak {
marker = google.maps.marker baru ({
Posisi: Latlng,
Peta: Peta
});
var iw = '<div style = "font-size: 12px; word-wrap: break-word; word-break: break-all;"> <strong> <font color = "#000000">' + Lokasi [i] [0] + '<font> </strong> <vov>';
}
iWarray [i] = iW;
google.maps.event.addlistener (marker, 'mouseover', (function (marker, i) {
return function () {
infowindow = google.maps.infowindow baru ({
Konten: iWarray [i],
Maxwidth: 200,
PixelOffset: Google.maps.size baru (0, 0)
});
infowindow.open (peta, penanda);
}
}) (marker, i));
google.maps.event.addlistener (marker, 'mouseout', function () {
infowindow.close ();
});
lingkaran = google.maps.circle baru ({
Peta: peta,
Radius: Lokasi [i] [3],
FillColor: '#0000aa',
Fillopacity: 0,01,
Strokeweight: 1,
Strokecolor: '#0000cc',
Strokopacity: 0.8
});
Circle.bindto ('Center', Marker, 'Position');
}
peta.fitbounds (latlngbounds);
var listener = google.maps.event.addListeneronce (peta, "idle", function ()
{
var zoomlevel = parseInt (map.getZoom ());
if (zoomlevel> 13)
Map.setZoom (13);
});
}
google.maps.event.adddomlistener (jendela, 'muat', inisialisasi);
</script>
</head>
<body>
<Div id = "peta-canvas"> </div>
</body>
</html>