在多邊形的mouseenter上添加InfoWindow（），每個多邊形都有一個內容

Question

我有2個（或更多）多邊形，它可以正常工作。但我想爲每個多邊形添加一個mouseenter事件，並顯示相應的infowindow。

我在這方面沒有IDEIA（addGeojson）怎麼辦呢

代碼：

var mapOptions = { 
 
    zoom: 4, 
 
    scrollwheel: false, 
 
    center: {lat: 30.162129, lng: -117.341888},   
 
}; 
 

 
geos = [{'type': 'Feature', 'geometry': {'type': 'Polygon', 'osm_type': 'relation', 'coordinates': [[[-482.2998046875,39.07890809706475],[-478.388671875,39.198205348894795],[-480.234375,36.10237644873644],[-483.72802734375,36.932330061503144],[-482.2998046875,39.07890809706475]]]}}, {'type': 'Feature', 'geometry': {'type': 'Polygon', 'osm_type': 'relation', 'coordinates': [[[-478.98193359375006,35.60371874069731],[-480.38818359375,33.687781758439364],[-477.31201171875,32.02670629333614],[-476.89453125,34.361576287484176],[-478.98193359375006,35.60371874069731]]]}}]; 
 

 
var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
for(var i = 0; i < geos.length; i++) { 
 
\t map.data.addGeoJson(geos[i]); 
 
} 
 

 
map.data.setStyle({ 
 
    \t fillColor: 'orange', 
 
    \t strokeWeight: 1 
 
});

<div id="map" style="width: 400px; height: 400px;"> 
 
</div> 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

的jsfiddle here

Answer 1

試試這個修改後的代碼，希望它有助於。！

var mapOptions = { 
     zoom: 4, 
     scrollwheel: false, 
     center: { lat: 37.140962, lng: -121.604583 }, 
    }; 

    geos = [{ 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'osm_type': 'relation', 'coordinates': [[[-482.2998046875, 39.07890809706475], [-478.388671875, 39.198205348894795], [-480.234375, 36.10237644873644], [-483.72802734375, 36.932330061503144], [-482.2998046875, 39.07890809706475]]] } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'osm_type': 'relation', 'coordinates': [[[-478.98193359375006, 35.60371874069731], [-480.38818359375, 33.687781758439364], [-477.31201171875, 32.02670629333614], [-476.89453125, 34.361576287484176], [-478.98193359375006, 35.60371874069731]]] } }]; 

    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    for (var i = 0; i < geos.length; i++) { 
     var polygon = new google.maps.Data({ map: map }); 
     polygon.addGeoJson(geos[i]); 
     //Call attachPolygonInfoWindow method here 
     attachPolygonInfoWindow(polygon); 
     polygon.setStyle({ 
      fillColor: 'orange', 
      strokeWeight: 1 
     }); 
    } 

附加信息窗口與多邊形的方法。

function attachPolygonInfoWindow(polygon) { 
     var infoWindow = new google.maps.InfoWindow(); 
     google.maps.event.addListener(polygon, 'mouseover', function (e) {    
      infoWindow.setContent("Polygon"); 
      var latLng = e.latLng; 
      infoWindow.setPosition(latLng); 
      infoWindow.open(map); 
     }); 
    }