Javascript 在Angularjs框架内结合Marker Clusterer和google maps API

总之：

我想知道是否有可能将marker clusterer包与

angularjs google maps

包结合起来，以及是否有任何解决方案

详情：

我正在替换

angular google maps

包，因为它不再维护。推荐的替代方案是

angularjs谷歌地图

，这是我在以下代码中使用的：

HTML:

Angularjs：

var lpool= {lat: 53.4084, lng: -2.9916};
var self = this;
var self.customers = [];//data objects received elsewhere

        //retrieve map object
        NgMap.getMap().then(function(map) {
            self.mapObject = map;

            //Liverpool geolocation
            var options = {
                zoom:12,
                center:lpool
            };

            //options passed to map
            self.mapObject.setOptions(options);

                createMarkers(); // Start the chain

        });

 function createMarkers() {
        // marker icons
        var iconUrlBlue = 'modules/driver/images/gm-marker-blue.png';
        var iconUrlPink = 'modules/driver/images/gm-marker-pink.png';

        // min/max values for nudging markers who are on the same spot
        var min = 0.999999;
        var max = 1.000001;
        var markers = [];

        self.customers.forEach(function(customer) {
            // create info window instance
            var infoWindow = new google.maps.InfoWindow(),
                    latitude = customer.location[1] * (Math.random() * (max - min) + min),
                longitude = customer.location[0] * (Math.random() * (max - min) + min);

            //create marker instance
            var googleMarker = new google.maps.Marker({
            position:{
                lat:latitude,
              lng:longitude
            },
            map:self.mapObject,
        icon:iconUrlPink,
          });

            function clickMarker() {
                //wrapped in apply function so Angular makes list changes
                $scope.$apply(function(){
                customer.isChecked = !customer.isChecked;
                googleMarker.setIcon( customer.isChecked ? iconUrlBlue : iconUrlPink);
                 });
                }

            function showWindow(){
                infoWindow.setOptions({
                    content:'<h4><strong>' + customer._id + '</strong> ' + customer.address + '</h4>',
                    position:{lat:latitude, lng:longitude},
                    pixelOffset: new google.maps.Size(0, -33)
                    });
                infoWindow.open(self.mapObject);
                }

            function hideWindow(){
                    infoWindow.close();
                }

            //apply previous functions to the marker
            googleMarker.addListener('click', clickMarker);
            googleMarker.addListener('mouseover', showWindow);
            googleMarker.addListener('mouseout', hideWindow);

            markers.push(googleMarker);
        });

        //create marker cluster instance
     var markerCluster = new MarkerClusterer(self.mapObject, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});


    }

 var lpool= {lat: 53.4084, lng: -2.9916};
var self = this;
var self.customers = [];//data objects received elsewhere

        //retrieve map object
        NgMap.getMap('googleMap').then(function(map) {
            self.mapObject = map;

            //Liverpool geolocation
            var options = {
                zoom:12,
                center:lpool
            };

            //options passed to map
            self.mapObject.setOptions(options);

                createMarkers(); // Start the chain

        });

    // 3. Configure google markers for each customer
    function createMarkers() {
        // marker icons
        var iconUrlBlue = 'modules/driver/images/gm-marker-blue.png';
        var iconUrlPink = 'modules/driver/images/gm-marker-pink.png';

        var infoWindow = new google.maps.InfoWindow();

        // min/max values for nudging markers who are on the same spot
        var min = 0.999999;
        var max = 1.000001;
        var markers = [];

        self.customers.forEach(function(customer) {
            // create info window instance

                var latitude = customer.location[1] * (Math.random() * (max - min) + min),
                longitude = customer.location[0] * (Math.random() * (max - min) + min);

            //create marker instance
            var googleMarker = {
            pos:[
                latitude,
              longitude
            ],
            position:{
                lat:latitude,
                lng:longitude
            },
            map:self.mapObject,
        icon:iconUrlPink,
            clickMarker : function() {
                    customer.isChecked = !customer.isChecked;
                  googleMarker.icon = customer.isChecked ? iconUrlBlue :   iconUrlPink;
             },
            showWindow : function(){
                infoWindow.setOptions({
                     content:'<h4><strong>' + customer._id + '</strong> ' + customer.address + '</h4>',
                     position:{lat:latitude, lng:longitude},
                     pixelOffset: new google.maps.Size(0, -33)
                     });
                 infoWindow.open(self.mapObject);
             },
            hideWindow : function(){
                    infoWindow.close();
                }
        };
            markers.push(googleMarker);
        });
        self.markers = markers;

        //create marker cluster instance
     var markerCluster = new MarkerClusterer(self.mapObject, self.markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});


    }

根据此处列出的说明：

如果有人能解决这个问题，我们将不胜感激。谢谢。

为了与

1） 通过

marker

指令删除标记的初始化。而是创建一个标记数组（google.maps.Marker的

type项）：

2） 然后通过
MarkerClusterer
对象初始化地图上的标记：

var mc = new MarkerClusterer($scope.map, markers, mcOptions);

范例


angular.module（'mapApp'，['ngMap']））
.controller（'mapController'，函数（$scope，NgMap）{
NgMap.getMap（）.then（函数（map）{
$scope.map=map；
$scope.initMarkerClusterer（）；
});
$scope.cities=[
{id:1，姓名：'Oslo'，pos:[59.923043,10.752839]}，
{id:2，姓名：'斯德哥尔摩'，位置：[59.339025,18.065818]}，
{id:3，姓名：'Copenhagen'，pos:[55.675507,12.574227]}，
{id:4，姓名：'柏林'，位置：[52.521248,13.399038]}，
{id:5，名字：'巴黎'，位置：[48.856127，2.346525]}
];
$scope.initMarkerClusterer=函数（）{
var markers=$scope.cities.map（函数（城市）{
返回$scope.createMarker（城市）；
});
var mcOptions={imagePath:'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
返回新的MarkerClusterer（$scope.map，markers，mcOptions）；
};
$scope.createMarker=函数（城市）{
var marker=new google.maps.marker({
位置：新的google.maps.LatLng（city.pos[0]，city.pos[1]），
标题：city.name
});
google.maps.event.addListener（标记，'click'，函数（）{
$scope.selectedCity=城市；
$scope.map.showInfoWindow（'myInfoWindow'，this）；
});
返回标记；
}
});

{{selectedCity.name}

 var lpool= {lat: 53.4084, lng: -2.9916};
var self = this;
var self.customers = [];//data objects received elsewhere

        //retrieve map object
        NgMap.getMap('googleMap').then(function(map) {
            self.mapObject = map;

            //Liverpool geolocation
            var options = {
                zoom:12,
                center:lpool
            };

            //options passed to map
            self.mapObject.setOptions(options);

                createMarkers(); // Start the chain

        });

    // 3. Configure google markers for each customer
    function createMarkers() {
        // marker icons
        var iconUrlBlue = 'modules/driver/images/gm-marker-blue.png';
        var iconUrlPink = 'modules/driver/images/gm-marker-pink.png';

        var infoWindow = new google.maps.InfoWindow();

        // min/max values for nudging markers who are on the same spot
        var min = 0.999999;
        var max = 1.000001;
        var markers = [];

        self.customers.forEach(function(customer) {
            // create info window instance

                var latitude = customer.location[1] * (Math.random() * (max - min) + min),
                longitude = customer.location[0] * (Math.random() * (max - min) + min);

            //create marker instance
            var googleMarker = {
            pos:[
                latitude,
              longitude
            ],
            position:{
                lat:latitude,
                lng:longitude
            },
            map:self.mapObject,
        icon:iconUrlPink,
            clickMarker : function() {
                    customer.isChecked = !customer.isChecked;
                  googleMarker.icon = customer.isChecked ? iconUrlBlue :   iconUrlPink;
             },
            showWindow : function(){
                infoWindow.setOptions({
                     content:'<h4><strong>' + customer._id + '</strong> ' + customer.address + '</h4>',
                     position:{lat:latitude, lng:longitude},
                     pixelOffset: new google.maps.Size(0, -33)
                     });
                 infoWindow.open(self.mapObject);
             },
            hideWindow : function(){
                    infoWindow.close();
                }
        };
            markers.push(googleMarker);
        });
        self.markers = markers;

        //create marker cluster instance
     var markerCluster = new MarkerClusterer(self.mapObject, self.markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});


    }

    var flag = false;

    $scope.$on("$stateChangeStart", function(event, to, toParams) {
       if (flag) {
        flag = false;
       return;
        }
    markers.forEach(function(marker){
       marker.setMap(null);
        });
    markers = [];
   event.preventDefault();
   flag = true;

 $state.go(to, toParams);
  });

var markers = [];
data.forEach(function(item) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(item.lat, item.lng),
        title: item.name
    });
    markers.push(marker)
});

var mc = new MarkerClusterer($scope.map, markers, mcOptions);