infowindowを使用したng-mapクラスタ

Question

クラスタにinfowindowを表示しようとしています。私の問題は、情報ウィンドウがクラスターよりはるかに表示されていて、それが表示されていないことです。

これは私がクラスタにクリックイベントを追加した方法です：

$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マーカークラスタ上で情報ウィンドウを配置するには：

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>