在Angularjs框架内将Marker集群和google映射API结合起来

Question

总结如下：

我想知道是否有可能将标记集群包与angularjs-google-maps包结合起来，以及是否有解决问题的方法。

详细信息：

我将替换angular-google-maps包，因为它已不再维护。推荐的替代方法是angularjs-google-maps，这是我在以下代码中使用的：

HTML：

 <ng-map></ng-map>

安古拉杰：

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


    }

问题是，每当我更改页面并重新加载地图页面时，标记都会被复制。正如所有者在本期angularjs-google-maps包中所指出的，下面是问题所在：

https://github.com/allenhwkim/angularjs-google-maps/issues/575

我按照他的指示使用marker指令，并通过删除new google.maps.Marker方法来阻止在地图上出现重复。以下是代码：

HTML：

        <ng-map id="googleMap">
                    <marker ng-repeat="marker in driverCtrl.markers"
                                    position="{{marker.pos}}"
                                    on-click="marker.clickMarker()"
                                    icon="{{marker.icon}}"
                                    on-mouseover="marker.showWindow(marker)"
                                    on-mouseout="marker.hideWindow()"></marker>
                </ng-map>

安古拉杰：

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


    }

这是标记聚类库：

https://googlemaps.github.io/js-marker-clusterer/docs/examples.html (我不能发布超过2个链接，因为我有不到10个声誉点！)

这个实例中的问题是标记聚类器需要在标记对象上调用此方法new google.maps.Marker才能工作。看来，我不能将angularjs-google-maps包与marker-clusterer包一起使用。有没有人遇到过这个问题，有没有人有解决办法？

我尝试过的其他解决方案：

1. 在工厂函数中创建变量以维护标记对象，并在页面更改和重新加载时使用marker.setMap(null)方法删除重复内容。
2. 我还使用了以下代码来在状态转换(更改页)之前对标记实例进行null： $scope.$on("$stateChangeStart"，函数(事件，to，toParams) { if (标志){ false；}markers.forEach(函数(标记){ marker.setMap(null)；})；标记= []；event.preventDefault()；标志=真；$state.go(to，toParams)；})；

按照这里提出的指示：

https://github.com/angular-ui/ui-router/issues/1158

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

Answer 1

为了把js-marker-clusterer和angularjs-google-maps结合起来

1)通过marker指令删除标记的初始化。相反，创建一个标记数组( google.maps.Marker类型的项)：

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

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

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

示例

​

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function ($scope, NgMap) {

        NgMap.getMap().then(function (map) {
            $scope.map = map;
            $scope.initMarkerClusterer();
        });

        $scope.cities = [
            { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
            { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
            { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
            { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
            { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
        ];



        $scope.initMarkerClusterer = function () {
            var markers = $scope.cities.map(function (city) {
                return $scope.createMarker(city);
            });
            var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
            return new MarkerClusterer($scope.map, markers, mcOptions);
        };


        $scope.createMarker = function (city) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(city.pos[0], city.pos[1]),
                title: city.name
            });
            google.maps.event.addListener(marker, 'click', function () {
                $scope.selectedCity = city;
                $scope.map.showInfoWindow('myInfoWindow', this);
            });
            return marker;
        }

    });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="app.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
    <ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
        <info-window id="myInfoWindow">
            <div ng-non-bindable>
                <h4>{{selectedCity.name}}</h4>
            </div>
        </info-window>
    </ng-map>
</div>

​