谷歌地图蜘蛛集群
google map spiderfier cluster
本文关键字:谷歌地图 更新时间:2023-09-26
关于 spiderfier 集群的问题,我设法让它与 markerClusterer 一起使用,但是有没有办法在放大时自动爬虫它,这样它就不会在地图缩放时只显示 1 个标记?
假设如果您达到 maxZoom 级别 11,那么它应该会自动蜘蛛化标记。
这是我的蜘蛛机选项:
var oms = new OverlappingMarkerSpiderfier(map, {keepSpiderfied : true, markersWontMove : false, circleSpiralSwitchover: 5});
谢谢
(function(){
var gm = google.maps;
var config = {
el: 'map',
lat: 37.4419,
lon: -122.1419,
zoom: 15,
minZoom: 15,
type: google.maps.MapTypeId.ROADMAP
};
var spiderConfig = {
keepSpiderfied: true,
event: 'mouseover'
};
// A list of Markers with the same location
var data = [
{lat: 37.4419, lon: -122.1419, title: 'location 1'},
{lat: 37.4419, lon: -122.1419, title: 'location 2'},
{lat: 37.4419, lon: -122.1419, title: 'Marker same location 3'},
{lat: 37.4419, lon: -122.1419, title: 'Marker same location 4'},
{lat: 37.4419, lon: -122.1419, title: 'Marker same location 5'},
{lat: 37.4419, lon: -122.1419, title: 'Marker same location 6'},
{lat: 37.4419, lon: -122.1419, title: 'Marker same location 7'},
{lat: 37.4419, lon: -122.1419, title: 'Marker same location 8'},
{lat: 37.4419, lon: -122.1419, title: 'Marker same location 9'}
];
function initialize() {
var map = new gm.Map(document.getElementById(config.el), {
zoom: config.zoom,
center: new gm.LatLng(config.lat, config.lon),
mapTypeId: config.type
});
var markerSpiderfier = new OverlappingMarkerSpiderfier(map, spiderConfig);
var markers = [];
for (var x in data) {
var loc = new gm.LatLng(data[x].lat, data[x].lon);
var marker = new gm.Marker({
position: loc,
title: data[x].title,
map: map
});
marker.desc = data[x].title;
markers.push(marker); // Saving Markers
markerSpiderfier.addMarker(marker); // Adds the Marker to OverlappingMarkerSpiderfier
}
var iw = new gm.InfoWindow();
markerSpiderfier.addListener('click', function(marker, e) {
iw.setContent(marker.title);
iw.open(map, marker);
});
markerSpiderfier.addListener('spiderfy', function(markers) {
iw.close();
});
var markerCluster = new MarkerClusterer(map, markers);
markerCluster.setMaxZoom(config.minZoom);
}
gm.event.addDomListener(window, 'load', initialize);
})();
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 在谷歌地图上获取事件的x,y坐标
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 模拟谷歌地图中的点击
- 如何知道哪个标记被谷歌地图点击了
- 谷歌地图JS API+JSON-多个标记没有显示
- 缓存谷歌地图数据
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 在谷歌地图上绘制位置数据库
- 标记的实时更新,无需加载页面谷歌地图API V3
- 可以't计算自定义谷歌地图的js
- 谷歌地图可以't添加正确的标记ID
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图v3标记没有显示ie8和9