角度のあるGoogleマップでポリゴンをクリックすると、どのようにウィンドウが表示されますか？

Question

マップ上のリージョンの1つがクリックされるたびに、そのリージョンのウィンドウが開きますが、それは表示されません。次のように

期待される結果は次のようになります。ここでは

Here is how I want it to look.

は私のhtmlです：ここでは

<ui-gmap-polygon static="true" ng-repeat="p in regions track by p.id" path="p.path" visible="p.visible" stroke="p.stroke" fill="p.fill" events="events" clickable="true" > 
</ui-gmap-polygon> 
<ui-gmap-windows models="markers" show="show"> 
    <!-- Window Code --> 
</ui-gmap-windows> 

はポリゴンの$のscope.events.click機能である：

for(var i = 0; i < $scope.markers.length; i++) { 
    //console.log(model.path[0].id + " == " + $scope.markers[i].id); 
    if(model.path[0].id == $scope.markers[i].id) { 
    console.log("Showing window " + model.path[0].id); 
    $scope.markers[i].show = true; 
    } 
    else 
    { // hides other windows 
    $scope.markers[i].show = false; 
    } 
} 

何かに注意してください。ログステートメントは表示されますが、ウィンドウは表示されません。 ここにはプランナーがあります：Plunker

Answer 1

私は問題の代替解決策を考え出しました。代わりに、すべてのマーカーのためのウィンドウを使用して、私は1つだけ使用：

<ui-gmap-window coords="selected" show="windowShown" closeClick="closeClick()"> 
     <!-- Window Code --> 
</ui-gmap-window> 

はその後、我々は、同様のクリック機能持つコントローラで：

/* 
    Events when clicking on a polygon. 
*/ 
    $scope.events = { 
    click: function(polygon, eventName, model) { 
     // show the window 
     for(var i = 0; i < $scope.markers.length; i++) { 
     if(model.path[0].id == $scope.markers[i].id) { 
      $scope.selected = $scope.markers[i]; 
      $scope.windowShow = true; 
     } 
     } 
    } 
    }; 

最後に、我々は必ず$を作るためにcloseClick機能を持っていますscope.windowShownは、ウィンドウが閉じられた後にfalseに設定されます。それ以外の場合は、閉じた後に同じポリゴンでウィンドウを開くことはできません。 show="'show'"coords="'coords'"

I：

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds"> 
    <ui-gmap-polygons static="true" models="regions" path="'path'" visible="true" stroke="'stroke'" fill="'fill'" events="events" clickable="true" > 
    </ui-gmap-polygons> 

    <ui-gmap-windows models="markers" show="'show'" coords="'coords'"> 
     <div ng-non-bindable>Test</div> 
    </ui-gmap-windows> 
</ui-gmap-google-map> 

あなたは、文字列などのように値を定義するプロパティを定義する必要があります。

$scope.closeClick = function() { $scope.windowShow = false; } 

Answer 2

は、私はあなたが複数のポリゴンがそうにあなたのhtmlを変更、追加したいと思います私は複数の値をテストしたいので、2番目のモデルを追加しました。コントローラは次のようになります。

... 
$scope.regions = [ 
    { 
     id: 0, 
     path: [ 
      {latitude: 39.13773735160255, longitude: -86.51972115039825, id: 0}, 
      {latitude: 39.137606286024926, longitude: -86.51961386203766}, 
      {latitude: 39.137664537422864, longitude: -86.51949316263199}, 
      {latitude: 39.13779768329436, longitude: -86.51960045099258} 
     ] 
     }, 
     { 
     id: 1, 
     path: [ 
      {latitude: 39.13673735160255, longitude: -86.51972115039825, id: 1}, 
      {latitude: 39.136606286024926, longitude: -86.51961386203766}, 
      {latitude: 39.136664537422864, longitude: -86.51949316263199}, 
      {latitude: 39.13679768329436, longitude: -86.51960045099258} 
     ] 
     } 
    ] 

    $scope.markers= [{ 
     id: 0, 
     show: true, 
     coords: { //you need an object containing latitude and longitude, so i wrapped these properties into coords 
      latitude: 39.13773735160255, 
      longitude: -86.51972115039825 
     } 
     },{ 
     id: 1, 
     show: true, 
     coords: { 
      latitude: 39.13673735160255, 
      longitude: -86.51972115039825 
     } 
     } 
     ] 

    $scope.events = { 
     click: function(polygon, eventName, model) { 
     // show the window 
     for(var i = 0; i < $scope.markers.length; i++) { 
      if(model.path[0] && model.path[0].id == $scope.markers[i].id) { 
      $scope.markers[i].show = true; 
      console.log("Window Displayed") 
      } else { 
      $scope.markers[i].show = false; 
      } 
     } 
     } 
    }; 

たとえば、次のような場合にデータモデルを変更する必要があります。 idが2回定義されている領域。