谷歌地圖 - 用於多個多邊形的 InfoWindows

Question

如何獲取多個多邊形的谷歌地圖信息窗口？ 我設法獲得多個多邊形，但我無法顯示每個多邊形的信息窗口和多邊形的中心信息窗口。

jsfiddle： https ://jsfiddle.net/ow8kb0vn/

 var editedPolygons = [ [ [ { "lat":14.56754606924714, "lng":120.99225461483002 }, { "lat":14.567213783453319, "lng":120.9916752576828 }, { "lat":14.566736121747363, "lng":120.99207758903503 } ], { "color":"green", "title":"---------------------------------------info content green" } ], [ [ { "lat":14.566383066777853, "lng":120.99221169948578 }, { "lat":14.566325954891425, "lng":120.99138557910919 }, { "lat":14.565635419093956, "lng":120.9915840625763 }, { "lat":14.565635419093956, "lng":120.9925840625763 } ], { "color":"red", "title":"----------------------------------------------info content red" } ] ]; var map; function initialize() { var mapProp = { center: new google.maps.LatLng(14.5667, 120.9927), zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("googleMap"), mapProp); for (var i = 0; i < editedPolygons.length; i++) { var poly = new google.maps.Polygon({ fillColor: editedPolygons[i][1].color, strokeWeight: 2, path: editedPolygons[i][0], map: map }); var infowindow = new google.maps.InfoWindow({ content: editedPolygons[i][1].title }); poly.addListener('click', function() { infowindow.open(map, poly); }); } } google.maps.event.addDomListener(window, "load", initialize);

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,drawing&ext=.js"></script> <div id="googleMap"></div>

Answer 1

InfoWindow 需要一個位置。 您可以使用一個google.maps.Marker作為第二個參數open方法（或在通過MVCObject與position屬性）或當您創建設置其位置。

從文檔

錨點可以是任何公開 LatLng 位置屬性的 MVCObject

將其設置為多邊形中心的最簡單方法是計算多邊形邊界的中心並使用它。

// use function closure to associate the infowindow with the polygon
poly.addListener('click', (function(content) {
  return function() {
    // set the content
    infowindow.setContent(content);
    // set the position
    infowindow.setPosition(this.center);
    // open it
    infowindow.open(map);
  }
})(editedPolygons[i][1].title));

概念證明小提琴

 var map; function initialize() { var mapProp = { center: new google.maps.LatLng(14.5667, 120.9927), zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("googleMap"), mapProp); for (var i = 0; i < editedPolygons.length; i++) { var bounds = new google.maps.LatLngBounds(); var poly = new google.maps.Polygon({ fillColor: editedPolygons[i][1].color, strokeWeight: 2, path: editedPolygons[i][0], map: map }); for (var pathidx = 0; pathidx < poly.getPath().getLength(); pathidx++) { bounds.extend(poly.getPath().getAt(pathidx)); } // store the computed center as a property of the polygon for easy access poly.center = bounds.getCenter(); var infowindow = new google.maps.InfoWindow(); var title = editedPolygons[i][1].title; // use function closure to associate the infowindow with the polygon poly.addListener('click', (function(content) { return function() { // set the content infowindow.setContent(content); // set the position infowindow.setPosition(this.center); // open it infowindow.open(map); } })(editedPolygons[i][1].title)); } } google.maps.event.addDomListener(window, "load", initialize); var editedPolygons = [ [ [{ "lat": 14.56754606924714, "lng": 120.99225461483002 }, { "lat": 14.567213783453319, "lng": 120.9916752576828 }, { "lat": 14.566736121747363, "lng": 120.99207758903503 }], { "color": "green", "title": "---------------------------------------info content green" } ], [ [{ "lat": 14.566383066777853, "lng": 120.99221169948578 }, { "lat": 14.566325954891425, "lng": 120.99138557910919 }, { "lat": 14.565635419093956, "lng": 120.9915840625763 }, { "lat": 14.565635419093956, "lng": 120.9925840625763 }], { "color": "red", "title": "----------------------------------------------info content red" } ] ];

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="googleMap"></div>

Answer 2

問題來自infowindow變量隨時間變化的事實（每次i在循環中更改時它都指向不同的對象）。

如果你更換

poly.addListener('click', function() {
                infowindow.open(map, poly);
            });

和

(function(infowindow) {
          poly.addListener('click', function() {
            infowindow.open(map, poly);
          });
        })(infowindow);

它會起作用，因為匿名函數將強制代碼跟蹤好對象。

要在多邊形的中心顯示信息窗口，您必須計算該中心的位置。 然后將它傳遞給 infowindow 對象（它有一個position屬性）。