我有一个有多个多边形的google map sample。我将new google.maps.Polygon
函数更改为折线为
new google.maps.Polyline({
paths: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
})
但它没有划清界限。 Fiddle here。还有如何将对象名称设置为infowindow内容。我试过
var infowindow = new google.maps.InfoWindow({
content: i
});
答案 0 :(得分:3)
google.maps.Polyline没有paths
属性。变化:
new google.maps.Polyline({
paths: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
})
要:
new google.maps.Polyline({
path: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
})
代码段
var map, infoWindow;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bounds = new google.maps.LatLngBounds();
var polygons = [];
var arr = new Array();
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Define the LatLng coordinates for the polygon's path.
var coordinates = {
"feed1": [
[25.774252, -80.190262],
[18.466465, -66.118292],
[32.321384, -64.75737],
[25.774252, -80.190262]
],
"feed2": [
[26.774252, -81.190262],
[19.466465, -67.118292],
[33.321384, -65.75737],
[26.774252, -81.190262]
],
"feed3": [
[27.774252, -82.190262],
[20.466465, -68.118292],
[34.321384, -66.75737],
[27.774252, -82.190262]
]
};
for (var i in coordinates) {
arr = [];
for (var j = 0; j < coordinates[i].length; j++) {
arr.push(new google.maps.LatLng(
parseFloat(coordinates[i][j][0]),
parseFloat(coordinates[i][j][1])
));
bounds.extend(arr[arr.length - 1])
}
// Construct the polygon.
polygons.push(new google.maps.Polyline({
path: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
}));
polygons[polygons.length - 1].setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Hello World!"
});
google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {
infowindow.open(map);
infowindow.setPosition(event.latLng);
});
}
map.fitBounds(bounds);
//google.maps.event.addListener(arr, 'click', showArrays);
// infoWindow = new google.maps.InfoWindow();
}
/*
function showArrays(event) {
var contentString = '<b>Bermuda Triangle polygon</b><br>';
// Replace the info window's content and position.
infoWindow.setContent(contentString);
// infoWindow.setPosition(event.latLng);
infoWindow.open(map);
} */
google.maps.event.addDomListener(window, 'load', initialize);
&#13;
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
&#13;