Angular Google Maps 无法第二次点击标记答案

【问题标题】：Angular Google Maps can not click on marker the second timeAngular Google Maps 无法第二次点击标记
【发布时间】：2016-11-27 13:19:16
【问题描述】：

我创建了一个自定义标记，单击它，信息窗口打开。然后我关闭信息窗口。我尝试再次单击标记，但信息窗口未打开。它适用于其他两个标记。
以下是 plunker 示例。
谢谢您的帮助。

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

'use strict';
angular.module('app', ['uiGmapgoogle-maps'])
  .controller('locatorController', function($scope, $timeout, uiGmapGoogleMapApi) {
    var pinSymbol = function(color) {
  //    console.log("color: "+color);
    return {
      path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
      fillColor: color,
      fillOpacity: 1,
      strokeColor: '#FFFFFF',
      strokeWeight: 1.3,
      scale: 1.3
    };
  }

    $scope.map = {
      center: {
        latitude: 39,
        longitude: -98
      },
      control: {},
      zoom: 8,
      window: {
        model: {},
        show: false,
        options:{
          pixelOffset: {width:-1,height:-20}
        }
      },
      markers: [{
        "id": "1",
        "latitude": "39.05",
        "longitude": "-98.55",
        options: {
          labelContent : '$23',
          labelAnchor: "14 75",
          labelClass: 'labelClass',
          icon: pinSymbol('green'),
          labelInBackground: false
    }
      }, {
        "id": "2",
        "latitude": "39.15",
        "longitude": "-98.45"
      }, {
        "id": "3",
        "latitude": "39.25",
        "longitude": "-97.95"
      }, ],
      markersEvents: {
        click: function(marker, eventName, model, args) {
            
          $scope.$apply(function () {
		$scope.map.window.model = model;
          $scope.map.window.show = true;
                });
        }
      }
    };


  })
  .controller('templateController',function(){});

.location-finder .angular-google-map,
.location-finder .angular-google-map-container {
	height: 30em;
}

.selected {
  background: #ddd;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div ng-app="app" ng-controller="locatorController" class="location-finder">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control">

      <!-- Map Pins -->
      <ui-gmap-markers models="map.markers" idKey="'id'" coords="'self'" options="'options'"  events="map.markersEvents">
      </ui-gmap-markers>

      <!-- InfoWindows -->
<!-- this works, but infowindow is not attached to marker -->
      <ui-gmap-window 
      show="map.window.show" 
      coords="map.window.model" 
      templateUrl="'test'" 
      templateParameter="map.window.model" 
      options="map.window.options"
      ng-cloak>
      </ui-gmap-window>
<!-- try this instead of the above and the template does not load -->
<!-- <ui-gmap-window show="map.window.show" coords="map.window.model" templateUrl="'infowindow.tpl'" ng-cloak></ui-gmap-window>-->


    </ui-gmap-google-map>

  </div>


  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js" charset="utf-8"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.js" charset="utf-8"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.0-X.5/angular-google-maps.js" charset="utf-8"></script>
  <script src="script.js"></script>

</body>

</html>

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

【问题讨论】：

您如何实现标记可能存在问题。您可以尝试查看以前的 SO question 和 jsfiddle sample 以帮助您了解实现示例，而此 Angular Google Maps 以熟悉 AngularJS、Google 地图对象，包括标记、窗口、线条和形状。
感谢您的回复，但这两个示例都直接使用 Google Maps API v3。我正在尝试使用 Angular Google Maps API angular-ui.github.io/angular-google-maps 我可能遗漏了一些东西。

标签： angularjs google-maps google-maps-markers

【解决方案1】：

我使用以下帖子作为指导。 https://github.com/angular-ui/angular-google-maps/issues/548

我添加了一个隐藏窗口值

在地图数组中，我添加了以下函数： infoEvents: function (){$scope.map.window.show = false;}

....
}
  },
  infoEvents: function (){$scope.map.window.show = false;},
  doClusterRandomMarkers: true,
  clusterOptions: standardClusterType
.....

在 HTML 中我修改如下： closeClick="map.infoEvents"

  <ui-gmap-window
  show="map.window.show"
  coords="map.window.model"
  templateUrl="'infowindow.tpl'"
  templateParameter="map.window.model"
  options="map.window.options"
  closeClick="map.infoEvents"
  ng-cloak>
      </ui-gmap-window>

markers: [{
    "id": "1",
    "latitude": "39.05",
    "longitude": "-98.55",
    options: {
      labelContent : '$23',
      labelAnchor: "11 75",
      labelClass: 'labelClass',
      icon: pinSymbol('green'),
      labelInBackground: true
}

另外，请确保您放置了标记选项属性 -> labelInBackground: true 否则，我认为标签会覆盖标记并且事件不会注册。至少，我是这么解释的。

就是这样。

【讨论】：