如何在angularjs中將聚類標記添加到谷歌地圖

Question

我正在嘗試在angularjs中將聚類標記添加到Google地圖。

我已經包含了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循環中初始化它時，它會創建它的新對象。