在Google Map中显示多个Marker并画出Polygon

来源：互联网发布：停车源码编辑：程序博客网时间：2024/05/16 14:12

有时需要在地图显示多个位置并画出多段线

实现后截图：

HTML：

<!DOCTYPE html><html> <head>   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />   <title>Google Maps Multiple Markers</title>   <script src="http://maps.google.com/maps/api/js?sensor=false"           type="text/javascript"></script></head> <body>  <div id="map" style="width: 500px; height: 400px;"></div>  <script type="text/javascript">    var PathData = [["hello1",49.2761419673641, -123.118069007778], ["hello2",49.2791259862655, -123.129144031353],["hello3",49.2704849721733, -123.125236002048],["hello4",49.2732990317854, -123.117229946411],["hello5",49.2761419673641, -123.118069007778]]; function initialize() {// - set map    var map =         new google.maps.Map(document.getElementById('map'));// - set info window -- will be used in marker click event    var infowindow = new google.maps.InfoWindow();// - set middle path data to center    var center =         new google.maps.LatLng(PathData[2][1], PathData[2][2]);// - set markers    var marker, i;    for (i = 0; i < PathData.length; i++) {        marker = new google.maps.Marker({        position: new google.maps.LatLng(PathData[i][1], PathData[i][2]),        map: map      });      google.maps.event.addListener(marker, 'click', (function(marker, i) {        return function() {          infowindow.setContent(PathData[i][0]);          infowindow.open(map, marker);        }      })(marker, i));    }// - set polygon     var path = [];    var bounds = new google.maps.LatLngBounds();    bounds.extend(center);    for (var i in PathData)    {        var p = PathData[i];        var latlng = new google.maps.LatLng(p[1], p[2]);        path.push(latlng);        bounds.extend(latlng);    }    var poly = new google.maps.Polygon({        paths: path,        strokeColor: '#FF0000',        strokeOpacity: 0.8,        strokeWeight: 3,        fillColor: '#FF0000',        fillOpacity: 0.1    });    poly.setMap(map);              map.fitBounds(bounds);} google.maps.event.addDomListener(window, 'load', initialize);  </script></body></html>

1 0