如何在带有angularjs的Google地图上的多个确切位置上仅显示最后一个标记

Question

如果该位置具有多个精确的经度和纬度，我只想添加最后一个标记。

这是我的控制者：

.controller('MapsController', ['$scope', '$http', function ($scope, $http) {

 var map;

 //Marker clusterer
 var mc;
 var mcOptions = { gridSize: 20, maxZoom: 17, imagePath: "images/m" };

 //Global infoWindow
 var infowindow = new google.maps.InfoWindow();

 //Geocoder
 var geocoder = new google.maps.Geocoder();

 $scope.loadData = function () {
     var url = 'data/LatLng.json';
     return $http.get(url).then(function (response) {
         return response.data;
     });
 };

 function createMarker(latlng, info, data) {
     var marker = new google.maps.Marker({
         position: latlng,
         map: map
     });

     //Get array of markers currently in cluster
     var allMarkers = mc.getMarkers();

     //Check to see if any of the existing markers match the latlng of the new marker
     if (allMarkers.length != 0) {

         var count = 1;
         var morethanone = false;

         for (var i = 0; i < allMarkers.length; i++) {

             var existingMarker = allMarkers[i];
             var pos = existingMarker.getPosition();

             if (latlng.equals(pos)) {

                 info = info + info;

                 count = count + 1;
                 morethanone = true;
             }
         }
     }

     google.maps.event.addListener(marker, 'click', function () {
         infowindow.close();
         infowindow.setContent(info);
         infowindow.open(map, marker);
     });

     if (morethanone) {
         for (var a = 1; a < count; a++) {
             if (a === (count - 1)) {
                 marker.setLabel(String(count));
                 mc.addMarker(marker);
             }
         }
     }
     else {
         marker.setLabel(String(count));
         mc.addMarker(marker);
     }
     console.log(count);
     return marker;
 }

 $scope.initMap = function (data) {
     var mapOptions = {
         zoom: 7,
         center: new google.maps.LatLng(3.9443, 101.6954),
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }

     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

     var gmarkers = [];
     mc = new MarkerClusterer(map, [], mcOptions);

     data.forEach(function (item) {

         var latlng = new google.maps.LatLng(item.LAT, item.LON);
         var info = item.Cat + "," + item.Type;
         gmarkers.push(createMarker(latlng, info, data));
     });
 };

 $scope.loadData()
     .then($scope.initMap);

 }])

但是代码会在同一个位置添加多个标记，所以在这种情况下我有五个完全相同的位置，并且标记重叠了五次，这是不好的。您可以参考下图：

我想要的只显示一个标记（最后一个标记），标记为“5”。

任何想法怎么做？

谢谢。

Answer 1

未经测试，但试试这个。

.controller('MapsController', ['$scope', '$http', function ($scope, $http) {

 var map;    
 //Marker clusterer
 var mc;
 var mcOptions = { gridSize: 20, maxZoom: 17, imagePath: "images/m" };

 //Global infoWindow
 var infowindow = new google.maps.InfoWindow();

 //Geocoder
 var geocoder = new google.maps.Geocoder();

 $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(3.9443, 101.6954),
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }

     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

     var gmarkers = [];
     mc = new MarkerClusterer(map, [], mcOptions);

     data.forEach(function (item) {    
         var latlng = new google.maps.LatLng(item.LAT, item.LON);
         var info = item.Cat + "," + item.Type;
         gmarkers.push(createMarker(latlng, info, data));
     });
 };


 function createMarker(latlng, info, data) {
    //Get array of markers currently in cluster
    var allMarkers = mc.getMarkers();

    // Filter to duplicate markers
    var dupeMarkers = allMarkers.filter(function (existingMarker) {
         var pos = existingMarker.getPostion();
         return latlng.equals(pos)
     });

    // Remove duplicate markers
     dupeMarkers.forEach(function(dupeMarker) {
         mc.removeMarker(dupeMarker);  // remove from cluster
         dupeMarker.setMap(null);  // remove from map
     });

     // Add marker to the map
    var newMarker = new google.maps.Marker({
         position: latlng,
         map: map
     });            

     // Add marker to the cluster
     mc.addMarker(newMarker);

     // If you want to set the label to count of markers that are / were at this location
     marker.setLabel(dupeMarkers.length + 1);

     google.maps.event.addListener(newMarker, 'click', function () {
         infowindow.close();
         infowindow.setContent(info);
         infowindow.open(map, newMarker);
     });

     return newMarker;
 }


 $scope.loadData()
     .then($scope.initMap);    
 }]);