ที่นี่ฉันเพิ่งบอกวิธีใช้ Google Maps API มันถือเป็นวิธีที่จะดึงดูดความสนใจ ด้วยเหตุผลบางอย่าง Google ก็ห่างไกลจากทุกคน
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title> ตำแหน่งทางภูมิศาสตร์ </title>
<meta name = "viewport" content = "เริ่มต้น = 1.0, scalable user-scalable = no">>
<meta charset = "utf-8">
<style>
html, body, #map-canvas {
มาร์จิ้น: 0;
Padding: 0;
ความสูง: 100%;
-
</style>
<script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
<script>
แผนที่ var;
var poly;
ฟังก์ชั่นเริ่มต้น () {
var mylatlng = ใหม่ google.maps.latlng (31.1937077, 121.4158436);
ตำแหน่ง var = [
['test1, ความแม่นยำ: 150m', 31.1937077, 121.4158436, 100],
['test2, ความแม่นยำ: 150m', 31.2937077, 121.4158436, 100],
['test3, ความแม่นยำ: 150m', 31.0937077, 121.2158436, 100],
['test4, ความแม่นยำ: 150m', 31.3937077, 120.4158436, 100],
['test5, ความแม่นยำ: 150m', 31.1637077, 120.4858436, 100],
['test6, ความแม่นยำ: 150m', 31.1037077, 121.5158436, 100]
-
var mapoptions = {
ซูม: 13,
ศูนย์: mylatlng,
MapTypeId: google.maps.maptypeid.roadmap
-
MAP = ใหม่ google.maps.map (document.getElementById ('map-canvas')
Mapoptions);
// การตั้งค่าบรรทัด
var polyoptions = {
Strokecolor: '#00ff00', // สี
Strokeopacity: 1.0, // ความโปร่งใส
Strokeweight: 4 // ความกว้าง
-
poly = ใหม่ google.maps.polyline (polyoptions);
poly.setMap (แผนที่); // โหลด
/* ลูปเพื่อทำเครื่องหมายพิกัดทั้งหมด*/
/*สำหรับ (var i = 0; i <locations.length; i ++) {
var loc = [];
loc.push (ตำแหน่ง [i] [1]);
loc.push (ตำแหน่ง [i] [2]);
var path = poly.getPath (); // รับพิกัดของเส้น
path.push (ใหม่ google.maps.latlng (loc [0], loc [1])); // เพิ่มพิกัดมาร์คลงในบรรทัด
// สร้างไอคอนแท็ก
marker = ใหม่ google.maps.marker ({
ตำแหน่ง: ใหม่ google.maps.latlng (loc [0], loc [1])
แผนที่: แผนที่
// ไอคอน: "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 = ใหม่ google.maps.markerimage ("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");
สำหรับ (i = 0; i <location.length; i ++) {
var loc = [];
loc.push (ตำแหน่ง [i] [1]);
loc.push (ตำแหน่ง [i] [2]);
var path = poly.getPath (); // รับพิกัดของเส้น
path.push (ใหม่ google.maps.latlng (loc [0], loc [1]));
var latlng = ใหม่ google.maps.latlng (ตำแหน่ง [i] [1], ตำแหน่ง [i] [2]);
latlngbounds.extend (latlng);
if (ตำแหน่ง [i] [0] .indexof ("[cached") == 0 || (ตำแหน่ง [i] [0] .indexof ("[หลาย") == 0 && ที่ตั้ง [i] [0] .indexof ("[cached")> = 0)) {
marker = ใหม่ google.maps.marker ({
ตำแหน่ง: latlng,
แผนที่: แผนที่
ไอคอน: iconyellow
-
var iw = '<div style = "font-size: 12px; word-wrap: break-word; break-break: break-all;"> <strong> <font color = "#ff0000">' + ตำแหน่ง [i] [0] + '<font> </strong>
} อื่น {
marker = ใหม่ google.maps.marker ({
ตำแหน่ง: latlng,
แผนที่: แผนที่
-
var iw = '<div style = "font-size: 12px; word-wrap: break-word; break-break: break-all;"> <strong> <font color = "#000000">' + ตำแหน่ง [i] [0] + '<font> </strong>
-
Iwarray [i] = iw;
google.maps.event.addlistener (marker, 'mouseover', (ฟังก์ชั่น (marker, i) {
return function () {
infowIndow = ใหม่ google.maps.infowindow ({
เนื้อหา: iwarray [i],
MaxWidth: 200,
PixelOffset: ใหม่ google.maps.size (0, 0)
-
infowindow.open (แผนที่, เครื่องหมาย);
-
}) (เครื่องหมาย, i));
google.maps.event.addlistener (marker, 'mouseout', function () {
infowindow.close ();
-
circle = new google.maps.circle ({
แผนที่: แผนที่
รัศมี: สถานที่ [i] [3],
FillColor: '#0000aa',
การเติมเต็ม: 0.01
Strokeweight: 1,
Strokecolor: '#0000cc',
Strokeopacity: 0.8
-
circle.bindto ('center', marker, 'ตำแหน่ง');
-
map.fitbounds (latlngbounds);
var listener = google.maps.event.addlisteneronce (แผนที่, "ไม่ได้ใช้งาน", ฟังก์ชั่น ()
-
var zoomlevel = parseint (map.getzoom ());
ถ้า (zoomlevel> 13)
map.setzoom (13);
-
-
google.maps.event.adddomlistener (หน้าต่าง, 'โหลด', เริ่มต้น);
</script>
</head>
<body>
<div id = "map-canvas"> </div>
</body>
</html>