在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.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>

 

posted @ 2014-11-26 16:05  Nancy_0324  阅读(556)  评论(0)    收藏  举报