Google Maps - InfoWindows für mehrere Polygone

Question

Wie bekomme ich Google Maps Infowindow für mehrere Polygone? Ich schaffe es, mehrere Polygone zu bekommen, aber ich habe Probleme, das Info-Fenster für jedes Polygon- und Center-Info-Fenster im Polygon anzuzeigen.

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({ 
 
     \t fillColor: editedPolygons[i][1].color, 
 
     \t \t strokeWeight: 2, 
 
      path: editedPolygons[i][0], 
 
      map: map 
 
     }); 
 
     
 
    \t \t var infowindow = new google.maps.InfoWindow({ 
 
    \t \t \t content: editedPolygons[i][1].title 
 
    \t \t \t }); 
 
     
 
    \t \t poly.addListener('click', function() { 
 
    \t \t \t infowindow.open(map, poly); 
 
    \t \t \t }); 
 
    } 
 
} 
 

 
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

Die Infofenster eine Position benötigt. Sie können entweder ein google.maps.Marker als zweites Argument für die Methode open verwenden (oder eine MVCObject mit einer position-Eigenschaft übergeben) oder seine Position beim Erstellen festlegen.

vom documentation

kann ein Anker jede MVCObject sein, die

einfachste Art, eine LatLng Position Eigenschaft aussetzt gesetzt es das Zentrum des Polygons zu sein, ist der Mittelpunkt des zu berechnen, Polygone Grenzen und verwenden Sie das.

// 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)); 

proof of concept fiddle

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&ext=.js"></script> 
 
<div id="googleMap"></div>

Answer 2

Das Problem kommt von der Tatsache der infowindow Variablenänderungen über die Zeit (er zeigt auf ein anderes Objekt jedes Mal i Änderungen innerhalb der Schleife).

Wenn Sie

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

mit

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

ersetzen wird es funktionieren, weil die anonyme Funktion den Code zwingt Spur des guten Objekt zu halten.

Um das Infowindow in der Mitte des Polygons anzuzeigen, müssen Sie berechnen, wo sich dieses Zentrum befindet. Und dann übergeben Sie es an das Infowindow-Objekt (es hat eine position Eigenschaft).