Google Maps API V3：从群集中排除单个标记 [英] Google Maps API V3: Exclude single marker from clustering
本文介绍了Google Maps API V3：从群集中排除单个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Google Maps API，并使用网格群集作为标记。我想知道是否有办法从群集中排除单个标记。我想要一个始终可见的你在这里标记。我试着用一个不同的数组来表示这个标记，但是没有包含它的集群函数，但是没有成功。
有没有人有解决方案？
以下是我如何进行群集
$ b $
$（document）.on（'click'，'#mapbut'，function（）{
var items ，距离，you_are_here = []，markers_data = []，markers_data2 = []，fred，clust1，markss;
you_are_here.push（{
lat：Geo.lat，
lng：Geo .lng，
动画：google.maps.Animation.DROP，
标题：'您在这里'，
图标：{
路径：google.maps。 SymbolPath.CIRCLE，
比例：10
}，
infoWindow：{
content：'< p>您在这里< / p>'
}
$ b函数loadResults（data）{
if（data.map.length> 0）{
items = data.map;
（var i = 0; i< items.length; i ++）
{
var item = items [i];
var distance = [];
var dist2;
if（item.Lat！= und定义&& 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）+ '英里远'< / 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）;
返回clust1;
}，
scaleControl：true，
streetViewControl：false
}）;
map.addMarkers（you_are_here）;
解决方案
<一个选项：手动添加你的特殊标记（你不想聚集的标记）到地图上，所以它不会被添加到
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}，
动画：google.maps.Animation.DROP，
title：'您在这里'，
图标：{
路径：google.maps.SymbolPath.CIRCLE，
比例：10
}，
地图：map.map
}）;
程式码片段：
< pre-class =snippet-code-js lang-js prettyprint-override>
var Geo = {lat：40.7281575，lng：-74.07764}; $（document）.on（'click'，' mapbut'，function（）{var items，distance，you_are_here = []，markers_data = []，markers_data2 = []，fred，clust1，markss; function loadResults（data）{if（data.map.length> 0） {item = data.map; for（var i = 0; i< items.length; i ++）{var item = items [i]; var distance = []; var dist2; if（item.Lat！= undefined& amp ;& item.Lng！= undefined）{markers_data.push（{lat：item.Lat，lng：item.Lng，title：item.Site，infoWi ndow：{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 =新的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>你在这里< / 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 ：40.735657，Lng：-74.1723667，distance：2}]};
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
I am using the google maps api and using grid clustering for the markers. I wanted to know if there is a way to exclude a single marker from clustering. I want a "You are here" marker that is always visible. I tried using a different array for just that marker and not including it the cluster function but that didn't work.
Does anyone have a solution for this?
Here is how i am doing the clustering
$(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);
解决方案
The GMaps clusters all the markers you add to it with the addMarker method (if you provide a MarkerClusterer).
One option: add your "special" marker (the one that you don't want clustered) to the map manually, so it isn't added to the MarkerClusterer:
The GMaps.map property is a reference to the Google Maps Javascript API v3 map object. So this will add a marker to the map without letting the GMaps library know about it:
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
});
code snippet:
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>
这篇关于Google Maps API V3：从群集中排除单个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
