0

我正在使用google maps API并使用网格群集作为标记。我想知道是否有办法从群集中排除单个标记。我想要一个始终可见的“你在这里”标记。我试着用一个不同的数组来表示这个标记,但是没有包含它的集群函数,但是没有成功。Google Maps API V3:从群集中排除单个标记

有没有人有解决方案?

这里是我怎么做的聚类

$(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); 
+1

你如何创建集群?将所有标记添加到群集中,然后向地图添加新标记应该不会太难。但没有看到你的代码,很难说如何解决你在做什么。 – duncan

+0

@duncan我添加了代码。但即使我将它添加到群集后添加标记。 – bos570

+0

你在哪里添加不应该聚类的单独标记?请提供证明此问题的[最小,完整,测试和可读示例](http://stackoverflow.com/help/mcve)。 – geocodezip

回答

3

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>

0

要获得在我发送之后,这是相对简单的将标记数组添加到MarkerClusterer然后添加我的位置。

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

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

感谢