首页 > 代码库 > 在Google map图上做标记，并把标记相连接
在Google map图上做标记，并把标记相连接
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.8106 });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>
在Google map图上做标记，并把标记相连接
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。