1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>GeoLocation</title>
5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 <meta charset="utf-8">
7 <style>
8 html, body, #map-canvas {
9 margin: 0;
10 padding: 0;
11 height: 100%;
12 }
13 </style>
14 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
15 <script>
16 var map;
17 var poly;
18 function initialize() {
19 var myLatlng = new google.maps.LatLng(31.1937077, 121.4158436);
20 var locations = [
21 ['test1, accuracy: 150m', 31.1937077, 121.4158436, 100],
22 ['test2, accuracy: 150m', 31.2937077, 121.4158436, 100],
23 ['test3, accuracy: 150m', 31.0937077, 121.2158436, 100],
24 ['test4, accuracy: 150m', 31.3937077, 120.4158436, 100],
25 ['test5, accuracy: 150m', 31.1637077, 120.4858436, 100],
26 ['test6, accuracy: 150m', 31.1037077, 121.5158436, 100]
27 ];
28 var mapOptions = {
29 zoom: 13,
30 center: myLatlng,
31 mapTypeId: google.maps.MapTypeId.ROADMAP
32 };
33 map = new google.maps.Map(document.getElementById('map-canvas'),
34 mapOptions);
35 // 线条设置
36 var polyOptions = {
37 strokeColor: '#00ff00', // 颜色
38 strokeOpacity: 1.0, // 透明度
39 strokeWeight: 4 // 宽度
40 }
41 poly = new google.maps.Polyline(polyOptions);
42 poly.setMap(map); // 装载
43 /* 循环标出所有坐标 */
44 /*for(var i=0; i<locations.length; i++){
45 var loc = [];
46 loc.push(locations[i][1]);
47 loc.push(locations[i][2]);
48 var path = poly.getPath(); //获取线条的坐标
49 path.push(new google.maps.LatLng(loc[0], loc[1])); //为线条添加标记坐标
50 //生成标记图标
51 marker = new google.maps.Marker({
52 position: new google.maps.LatLng(loc[0], loc[1]),
53 map: map
54 // icon: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
55 });
56 }*/
57 var marker, i, circle;
58 var iwarray = [];
59 var infoWindow;
60 var latlngbounds = new google.maps.LatLngBounds();
61 var iconYellow = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");
62 for (i = 0; i < locations.length; i++) {
63 var loc = [];
64 loc.push(locations[i][1]);
65 loc.push(locations[i][2]);
66 var path = poly.getPath(); //获取线条的坐标
67 path.push(new google.maps.LatLng(loc[0], loc[1]));
68 var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);
69 latlngbounds.extend(latlng);
70 if (locations[i][0].indexOf("[Cached") == 0 || (locations[i][0].indexOf("[Multiple") == 0 && locations[i][0].indexOf("[Cached") >= 0 )) {
71 marker = new google.maps.Marker({
72 position: latlng,
73 map: map,
74 icon: iconYellow
75 });
76 var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#FF0000">' + locations[i][0] + '<font></strong><div>';
77 } else {
78 marker = new google.maps.Marker({
79 position: latlng,
80 map: map
81 });
82 var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#000000">' + locations[i][0] + '<font></strong><div>';
83 }
84 iwarray[i] = iw;
85 google.maps.event.addListener(marker, 'mouseover', (function(marker,i){
86 return function(){
87 infoWindow = new google.maps.InfoWindow({
88 content: iwarray[i],
89 maxWidth: 200,
90 pixelOffset: new google.maps.Size(0, 0)
91 });
92 infoWindow.open(map, marker);
93 }
94 })(marker,i));
95 google.maps.event.addListener(marker, 'mouseout', function() {
96 infoWindow.close();
97 });
98 circle = new google.maps.Circle({
99 map: map,
100 radius: locations[i][3],
101 fillColor: '#0000AA',
102 fillOpacity: 0.01,
103 strokeWeight: 1,
104 strokeColor: '#0000CC',
105 strokeOpacity: 0.8
106 });
107 circle.bindTo('center', marker, 'position');
108 }
109 map.fitBounds(latlngbounds);
110 var listener = google.maps.event.addListenerOnce(map, "idle", function()
111 {
112 var zoomLevel = parseInt(map.getZoom());
113 if (zoomLevel > 13)
114 map.setZoom(13);
115 });
116 }
117 google.maps.event.addDomListener(window, 'load', initialize);
118 </script>
119 </head>
120 <body>
121 <div id="map-canvas"></div>
122 </body>
123 </html>
