标签：
有时需要在地图显示多个位置并画出多段线
实现后截图：
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>在Google Map中显示多个Marker并画出Polygon
标签：
原文地址：http://blog.csdn.net/lan_liang/article/details/46279575
