您的位置：首页 > 编程语言 > Go语言

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

2015-05-30 23:13 351 查看

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

实现后截图：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航