Как показать только последний маркер в нескольких точном месте на картах Google с помощью angularjs

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» на нем.

Любые идеи, как это сделать?

Thank you.

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