Googleマップ - 複数のポリゴンのインフォウィジェット

Question

複数のポリゴンについてGoogleマップのインフォウィンドウを取得するにはどうすればよいですか？ 複数のポリゴンを取得することはできますが、ポリゴンごとにインフォメーションウィンドウとポリゴンの中央情報ウィンドウを表示するのに問題があります。

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

情報ウィンドウには、位置を必要とします。 openメソッドの2番目の引数としてgoogle.maps.Markerを使用するか（をpositionプロパティに渡す）、または作成時にその位置を設定することができます。

アンカーは、多角形の中心であることを設定する任意の緯度経度の位置プロパティを公開MVCObject

最も簡単な方法は、の中心を計算することであることができるdocumentation

からポリゴンの境界とそれを使用します。

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

問題は、（それが別のオブジェクトにループ内i変更するたびにポイント）という事実から、時間をかけてinfowindow変数の変更をしています。

あなたは

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

と

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

を交換する場合、匿名関数は良い物を追跡するためのコードが強制されますので、それは、動作します。

インフォウィンドウをポリゴンの中央に表示するには、この中心点を計算する必要があります。そしてそれをinfowindowオブジェクトに渡します（それはpositionプロパティを持っています）。