带有信息窗口的 ng-map 集群

Question

我正在尝试在群集上显示信息窗口。我的问题是信息窗口显示得比集群远，而不是在集群上。

这是我将点击事件添加到集群的方式：

  $scope.markerCluster = new MarkerClusterer(map, markers);
                google.maps.event.addListener($scope.markerCluster, 'clusterclick', function(cluster) {
                    $scope.map.showInfoWindow('bar', $scope.markerCluster);

                    console.log("cluster click");
                });

Answer 1

要在标记簇 setPosition function 上定位信息 window 需要显式调用，例如：

google.maps.event.addListener($scope.markerCluster, 'clusterclick', function (cluster) {

     var infoWindow = $scope.map.infoWindows["myInfoWindow"]; //get infoWindow instance
     infoWindow.setPosition(cluster.getCenter()); //<-set position 
     $scope.map.showInfoWindow('myInfoWindow', cluster);

  });

示例

angular.module('mapApp', ['ngMap'])
  .controller('mapController', function ($scope, NgMap) {

    NgMap.getMap().then(function (map) {
      $scope.map = map;
      $scope.initMarkerClusterer();
    });

    $scope.cities = [
      { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
      { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
      { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
      { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
      { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
    ];



    $scope.initMarkerClusterer = function () {
      var markers = $scope.cities.map(function (city) {
        return $scope.createMarker(city);
      });
      var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' , zoomOnClick: false };
      $scope.markerCluster = new MarkerClusterer($scope.map, markers, mcOptions);
      google.maps.event.addListener($scope.markerCluster, 'clusterclick', function (cluster) {

         //generate infoWindow content
         var cities = cluster.getMarkers().map(function(m){
             return m.title;
         });
         $scope.content = cities.join(",");
         
         var infoWindow = $scope.map.infoWindows["myInfoWindow"]; //get  infoWindow instance
         infoWindow.setPosition(cluster.getCenter());
         $scope.map.showInfoWindow('myInfoWindow', cluster);
         
      });
    };


    $scope.createMarker = function (city) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(city.pos[0], city.pos[1]),
        title: city.name
      });
      google.maps.event.addListener(marker, 'click', function () {
        $scope.content = marker.title;
        $scope.map.showInfoWindow('myInfoWindow', this);
      });
      return marker;
    }

  });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
  <ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
    <info-window id="myInfoWindow">
      <div ng-non-bindable>
        <h4>{{content}}</h4>
      </div>
    </info-window>
  </ng-map>
</div>

带有信息窗口的 ng-map 集群

ng-map cluster with infowindow

angularjs

google-maps

ng-map