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

proof of concept fiddle

代碼片段：

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

要獲得在我發送之後，這是相對簡單的將標記數組添加到MarkerClusterer然後添加我的位置。

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

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

感謝