Google Maps API V3：從群集中排除單個標記

Question

我正在使用google maps api，並對標記使用了網格聚類。 我想知道是否有辦法從聚類中排除單個標記。 我想要一個始終可見的“您在這里”標記。 我嘗試只為該標記使用其他數組，但不將其包含在集群函數中，但這沒有用。

有人對此有解決方案嗎？

這是我做集群的方式

$(document).on('click', '#mapbut', function() {

var items, distances, you_are_here = [], markers_data = [], markers_data2 = [], fred, clust1, markss;

  you_are_here.push({
      lat : Geo.lat,
      lng : Geo .lng,
      animation: google.maps.Animation.DROP,
      title : 'Your are here',
      icon: {
  path: google.maps.SymbolPath.CIRCLE,
  scale: 10
},
infoWindow: {
  content: '<p>You are Here</p>'
}
});

function loadResults (data) {

    if (data.map.length > 0) {
        items = data.map;

        for (var i = 0; i < items.length; i++)
        {
            var item = items[i];
            var distances = [];
            var dist2;

            if (item.Lat != undefined && item.Lng != undefined)
            {

                markers_data.push({
                  lat : item.Lat,
                  lng : item.Lng,
                  title : item.Site,
                        infoWindow: {
                          content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
                             }
                 });

             }
        }
    }


  map.addMarkers(markers_data);

  map = new GMaps({
       el: '#map',
       lat: Geo.lat,
       lng: Geo.lng,
       zoom: 10,
       mapTypeControl: false,
       zoomControl: true,
       zoomControlOptions: {
   position: google.maps.ControlPosition.LEFT_CENTER
       },
       markerClusterer: function(map) {
      options = {
        gridSize: 50
      }

    clust1 = new MarkerClusterer(map,[], options);
    return clust1;
  },

       scaleControl: true,
       streetViewControl: false

});

map.addMarkers(you_are_here);

Answer 1

GMaps使用addMarker方法（如果提供了MarkerClusterer）將添加到其上的所有標記聚集在一起。

一種選擇：將“特殊”標記（您不想集群的標記）手動添加到地圖，這樣就不會將其添加到MarkerClusterer ：

GMaps.map屬性是對Google Maps Javascript API v3地圖對象的引用。 因此，這會將標記添加到地圖，而無需讓GMaps庫知道：

  you_are_here = new google.maps.Marker({
    position: {lat: Geo.lat,lng: Geo.lng},
    animation: google.maps.Animation.DROP,
    title: 'Your are here',
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    map: map.map
  });    

概念證明

代碼段：

 var Geo = { lat: 40.7281575, lng: -74.07764 }; $(document).on('click', '#mapbut', function() { var items, distances, you_are_here = [], markers_data = [], markers_data2 = [], fred, clust1, markss; function loadResults(data) { if (data.map.length > 0) { items = data.map; for (var i = 0; i < items.length; i++) { var item = items[i]; var distances = []; var dist2; if (item.Lat != undefined && item.Lng != undefined) { markers_data.push({ lat: item.Lat, lng: item.Lng, title: item.Site, infoWindow: { content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>' } }); } } } map = new GMaps({ el: '#map', lat: Geo.lat, lng: Geo.lng, zoom: 8, mapTypeControl: false, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER }, markerClusterer: function(map) { options = { gridSize: 50, imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m" } clust1 = new MarkerClusterer(map, [], options); return clust1; }, scaleControl: true, streetViewControl: false }); map.addMarkers(markers_data); you_are_here = new google.maps.Marker({ position: { lat: Geo.lat, lng: Geo.lng }, animation: google.maps.Animation.DROP, title: 'Your are here', icon: { path: google.maps.SymbolPath.CIRCLE, scale: 10 }, infoWindow: { content: '<p>You are Here</p>' }, map: map.map }); // map.addMarkers(you_are_here); } loadResults(data); }); var data = { map: [{ Lat: 40.7127837, Lng: -74.005941, Site: "New York, NY", distance: 1 }, { Site: "Newark, NJ", Lat: 40.735657, Lng: -74.1723667, distance: 2 }] }; 

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script> <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script> <input id="mapbut" type="button" value="map" /> <div id="map"></div> 

Answer 2

要解決這個問題相對簡單，就在我將markers數組發送給MarkerClusterer之后，然后添加我的位置。

// Setup cluster markers
var markerCluster = new MarkerClusterer( gmap.map, options )

// add my location    
gmap.addMarker({
      lat: data.latitude,
      lng: data.longitude
      ...
    })

謝謝