角度UIマップuiMapInfoWindow内のボタン機能への複数呼び出し

Question

角度UIマップを使用して問題が発生しました。地図上にマーカーを置いて、クリックするとInfoWindowが開きます。各InfoWindowにはボタンがあります。 InfoWindowを開いてボタンをクリックすると、関数コールバックは一度=> OKと呼ばれます 別のマーカーをクリック=> InfoWindowが閉じられ、もう1つが開きます ボタンをクリックしてからコールバック

angular.module('plunker', ['ui.event', 'ui.map']) 

.controller("MainCtrl", function ($scope) { 
    $scope.markers = [] 

    $scope.mapOptions = { 
      center: new google.maps.LatLng(22.59373, 5.97656), 
      zoom: 3, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
    $scope.log = function (message) { 
    alert(message); 
    }; 

    $scope.$watch('myMap', function (newVal){ 
     if (newVal) {   
     var coord = [new google.maps.LatLng(20 , 4), new google.maps.LatLng(21 , 9), new google.maps.LatLng(23 , 13)]; 
     coord.forEach(createMarker) 
    } 
    }); 

    $scope.openMarkerInfo = function(marker) { 
      $scope.infoWindow.close(); 
      $scope.infoWindow.open($scope.myMap, marker); 
    } 
    function createMarker(loc) { 
     var marker = new google.maps.Marker({ 
       map: $scope.myMap, 
       position: loc 
      }); 

     $scope.markers.push(marker) 
    } 

}); 


function onGoogleReady() { 
    angular.bootstrap(document.getElementById("map"), ['plunker']); 
} 

HTML：：

機能はバグ

http://plnkr.co/edit/x71d9jZ7vL5TRTWBdK40?p=preview

MyJS> = 2回呼び出され

この問題を解決するにはどうすればよいですか？閉じるときにウィンドウが正しく削除されていないようです。

これはバグか愚かなことですか？ ;）

Answer 1

あなたはui-gmap-markersを見てとることができ、複数のマーカーのための特別な指示がある

これは私が古いプロジェクトで、これはするためのテンプレートです

<ui-gmap-google-map center='map.center' zoom='map.zoom'> 

    <ui-gmap-markers models="markers" coords="'self'" options="markerOptions" events="markerEvents" icon="'icon'"> 
    </ui-gmap-markers> 

    <ui-gmap-window coords="model.selectedMarker"show="model.selectedMarker.show" templateUrl="'/app/controls/gMapsControl/mapInfoWindow.html'" templateParameter="model.selectedMarker" closeClick="model.closeInfoWindow(model)"> 
    </ui-gmap-window> 
</ui-gmap-google-map> 

を発見した例です。属性としてmodelを取得します。 モデルは、私はそれがあなたの役に立てば幸い私のページコントローラ

this.$scope.mapModel = { 
      map: { 
       center: { 
        latitude: 52.5075419, 
        longitude: 13.4251364 
       }, 
       zoom: 10 
      }, 
      markers : [], 
      markerCallback: this.markerCallback, 
      selectedMarker: undefined, 
      closeInfoWindow: (model) => { 
       model.selectedMarker.show = false; 
      } 
     }; 

上で定義されています。重要な部分を抽出するのが少し難しい

Answer 2

私は、ui-gmap-markerという別の指令を使用しました。複数のマーカーを使用すると、UI-MAPにバグがあるようです。