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）。

但群集仍然没有出现。

这是我的代码：

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

任何想法如何添加它？

谢谢。

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

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

1 个答案: