如何在angularjs中将集群标记添加到谷歌地图答案

【问题标题】：How to add cluster marker to google maps in angularjs如何在angularjs中将集群标记添加到谷歌地图
【发布时间】：2017-02-06 05:42:23
【问题描述】：

我正在尝试在 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)。

但是集群仍然没有出现。

这是我的代码：

html:

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

控制器：

.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);

 }])

脚本：

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

任何想法如何添加它？

谢谢。

【问题讨论】：

标签： javascript angularjs google-maps

【解决方案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 循环中初始化它时，它会创建它的新对象。

【讨论】：