Angular UI-map多次调用uiMapInfoWindow内的按钮功能答案

【问题标题】：Angular UI-map Multiple call to a button function inside a uiMapInfoWindowAngular UI-map多次调用uiMapInfoWindow内的按钮功能
【发布时间】：2016-04-20 20:54:42
【问题描述】：

我使用 angular UI-Map 遇到了问题。我在地图上有标记，点击时会打开一个信息窗口。每个信息窗口都包含一个按钮。要重现错误：打开一个信息窗口并单击按钮，函数回调被调用一次 => OK 单击另一个标记 => 信息窗口已关闭，另一个已打开点击按钮，则回调函数被调用两次 => Bug

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

我的JS：

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：

<div id="map" data-ng-controller="MainCtrl">
  <div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>

  <div style="display: none;" ng-repeat="marker in markers" ui-map-marker="markers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}" ></div>

  <div class="infoWindow"  ui-map-info-window="infoWindow" >
     <button ng-click="log('tt')">Show</button>
  </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=onGoogleReady"></script>

我可以做些什么来解决这个问题？关闭时似乎没有正确删除窗口。

这是一个错误还是只是我的愚蠢？ ;)

【问题讨论】：

标签： javascript jquery angularjs google-maps

【解决方案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;
             }
        };

希望对你有帮助。提取重要部分有点困难

【讨论】：

我尝试了 ui gmap 并且它正在工作！ UI-MAP 指令似乎有一个未解决的错误。你的回答解决了我的问题。

【解决方案2】：

我使用了另一个名为 ui-gmap-markers 的指令。使用多个标记时，UI-MAP 似乎存在错误。

【讨论】：