Gar*_*ght 24 google-maps google-maps-api-3 markerclusterer
我在Filemaker的db文件上使用markerCLusterer V3,根据地址生成当前传送位置的(半实时)映射.从谷歌抓住lat/long并填充这些字段是没有问题的.通过markerClusterer生成地图是没有问题的.我甚至在本地托管JS,以便我可以更改maxZoom变量以将群集分开,超过最大缩放,这样我就可以看到多个标记.但是,如果标记处于完全相同的纬度/经度,我只能看到输入的最后一个.我想整合OverlappingMarkerSpiderfier到这个JS使我对以后放大过去MAXZOOM,标记将"蜘蛛"拆开看标记(作为一个例子,装备多件交付给同一个地址).我在网上找不到有关如何执行此操作的任何信息.它要么那么简单,我要错过它,或者还没有完成.在此先感谢您的帮助!
cea*_*aro 13
我正在使用:MarkerClustererPlus-2.0.14和OverlappingMarkerSpiderfier-version- ??
首先只有聚类工作,点击一个聚类,放大,但完全相同的点上的2个或更多标记仍然保持聚类,即使放大到最大.不幸的是没有蜘蛛侠出现:-(.
但是注意到了markerClusterPlus上的setMaxZoom()方法.当设置这个适当的缩放级别(对我来说是15)时,蜘蛛侠会超出缩放级别.它看起来像markerClusters说这不再是我的事,因为它取决于蜘蛛侠:-).
设置最大缩放将解决问题:
minClusterZoom = 14;
markerCluster.setMaxZoom(minClusterZoom);
但是出于查看目的,您可能想要创建一个clusterclick侦听器,以防止它在同一位置的一组点上非常靠近地放大(单击一个集合设置地图的边界以覆盖集群中的点;如果所有点都是如此它们在同一个位置会一直放大,看起来很糟糕):
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
map.fitBounds(cluster.getBounds()); // Fit the bounds of the cluster clicked on
if( map.getZoom() > minClusterZoom+1 ) // If zoomed in past 15 (first level without clustering), zoom out to 15
map.setZoom(minClusterZoom+1);
});
将Spiderfier JS集成到markerClusterer中
为了使两者协同工作,您只需要将maxZoom添加到clusterMarker对象
new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
(Zoomlevel 0是完整的地球,20非常接近地面).这意味着如果您进一步缩放到地图缩放级别15(例如,如果单击群集),则不再显示群集.如果您现在单击位于完全相同位置(或彼此接近)的标记,Spiderfier JS将触发.
它现在是一个最小的工作示例.我在代码中做了一些评论,所以我认为它是不言自明的,但这里有一些要提及的事情:
oms.min.js在加载google maps api后加载例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://maps.googleapis.com/maps/apijs?key=YOUR_API_KEY">
</script>
<script src="oms.min.js"></script>
<script src="markerclusterer.js"></script>
<script>
window.onload = function() {
// cluster marker
var clusterMarker = [];
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng( 50, 3),
zoom: 6,
mapTypeId: 'terrain'
});
// Create infowindow
var infoWindow = new google.maps.InfoWindow();
// Create OverlappingMarkerSpiderfier instsance
var oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true, markersWontHide: true});
// This is necessary to make the Spiderfy work
oms.addListener('click', function(marker) {
infoWindow.setContent(marker.desc);
infoWindow.open(map, marker);
});
// Some sample data
var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}];
for (var i = 0; i < sampleData.length; i ++) {
var point = sampleData[i];
var location = new google.maps.LatLng(point.lat, point.lng);
// create marker at location
var marker = new google.maps.Marker({
position: location,
map: map
});
// text to appear in window
marker.desc = "Number "+i;
// needed to make Spiderfy work
oms.addMarker(marker);
// needed to cluster marker
clusterMarker.push(marker);
}
new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
}
</script>
</head>
<body><div id="map" style='width:400px;height:400px;'></div></body></html>
建议
如果你从头开始,我建议使用JS Libary Leaflet.因为这个库提供了LeafletMarkerCluster插件,它基本上是集成了Spiderfier的markercluster,还有很多其他很酷的东西.
优点:
Downsites:
这是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<link rel="stylesheet" href="leaflet/dist/MarkerCluster.css" />
<link rel="stylesheet" href="leaflet/dist/MarkerCluster.Default.css" />
<script src="leaflet/dist/leaflet.markercluster-src.js"></script>
<script>
$(document).ready(function(){
var tiles = L.tileLayer(***);//Depending on your tile provider
var map = new L.Map('map', {center: latlng, zoom: 1, layers: [tiles]});
var markers = new L.MarkerClusterGroup({
removeOutsideVisibleBounds: true,
spiderfyDistanceMultiplier: 2,
maxClusterRadius: 20
});
var markersList = [];
var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}];
for (var i = 0; i < sampleData.length; i ++) {
var point = sampleData[i];
var location = new L.LatLng(point.lat, point.lng);
// create marker at location
var m = new L.Marker(location);
m.bindPopup("Number" +i); //Text to appear in window
markersList.push(m);
markers.addLayer(m);
}
var bounds = markers.getBounds();
map.fitBounds(bounds)
map.addLayer(markers);
}
</head>
<body><div id="map" style='width:400px;height:400px;'></div></body></html>
我看到这篇文章是因为我正在寻找完全相同的东西，但幸运的是我已经成功了！
老实说，我没有做任何特别的事情，我遵循了 MarkerClusterer 的集成指南，然后遵循了 OverlappingMarkerSpiderfier 的集成指南，它们完美地协同工作。
当我单击/放大位于同一地址的一组属性时，最初它只显示“顶部”标记，但当我单击它时，它们就像您也想要它们一样蜘蛛侠！
当您尝试同时使用这两个脚本时，您会得到什么具体结果？
| 归档时间： |
|
| 查看次数： |
15012 次 |
| 最近记录： |