如何添加羣集標記到谷歌地圖在angularjs

Question

我想添加羣集標記谷歌地圖在angularjs。

我已經包含了js文件（https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/src/markerclusterer.js）和圖像（https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images）。

但是，羣集仍然不出現。

這是我的代碼：

1. HTML：

   <section id="GoogleMaps" ng-controller="MapsController"> 
   <div class="container"> 
       <div> 
        <div id="map_canvas"></div> 
       </div> 
   </div> 
   </section> 
   

2. 控制器：

   .controller('MapsController', ['$scope', '$http', function ($scope, $http) { 
   $scope.loadData = function() { 
       var url = 'data/LatLng.json'; 
       return $http.get(url).then(function (response) { 
        return response.data; 
       }); 
   }; 
   
   
   $scope.initMap = function (data) { 
       var mapOptions = { 
        zoom: 7, 
        center: new google.maps.LatLng(48.209500, 16.370691), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
   
   
       data.forEach(function (item) { 
        var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(item.LAT, item.LON), 
         animation: google.maps.Animation.Bounce, 
         map: map 
        }); 
   
        var options = { 
         imagePath: 'images/m' 
        }; 
   
        var markerCluster = new MarkerClusterer(map, marker, options); 
   
       }); 
   }; 
   
   
   $scope.loadData() 
       .then($scope.initMap); 
   
   }]) 
   

3. 腳本：

   addTag('script', { src: 'http://maps.googleapis.com/maps/api/js' }, sync); 
   addTag('script', { src: 'assets/js/markerclusterer.js' }, sync); 
   

任何想法如何添加它？

謝謝。

Answer 1

以如下方式初始化MarkerClusterer。

$scope.initMap = function (data) { 
var mapOptions = { 
    zoom: 7, 
    center: new google.maps.LatLng(48.209500, 16.370691), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
var markerArray = []; 


data.forEach(function (item) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(item.LAT, item.LON), 
     animation: google.maps.Animation.Bounce, 
     map: map 
    }); 

    markerArray.push(marker); 
}); 

var options = { 
    imagePath: 'images/m' 
}; 

var markerCluster = new MarkerClusterer(map, markerArray, options); 
}; 

當您在forEach循環中初始化它時，它會創建它的新對象。