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>