谷歌地图多个折线

我有一个带有多个多边形的谷歌地图样本 。 我将new google.maps.Polygon函数更改为折线为

  new google.maps.Polyline({ paths: arr, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }) 

但它并没有划清界限。 在这里小提琴 。 还有如何将对象名称设置为infowindow内容。 我试过了

  var infowindow = new google.maps.InfoWindow({ content: i }); 

编辑小提琴 。

Answer 1

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 = 'Bermuda Triangle polygon
'; // 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); 

  html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } 

Answer 2

将路径属性更改为路径

所以：

 // Construct the polygon. polygons.push(new google.maps.Polyline({ path: arr, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }));