Question

我创建了一个自定义标记，我点击它，信息窗口打开。然后我关闭信息窗口。我尝试再次单击标记，但信息窗口无法打开。它可以很好地处理其他两个标记以下是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

Answer 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 =＆＃34; map.infoEvents＆＃34;

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

另外，请确保放置标记选项属性 - ＆gt; labelInBackground：是的否则，我认为标签涵盖了标记和事件没有注册。至少，这就是我解释它的方式。

就是这样。

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

1 个答案: