dictionary - 带传单的地图:地图上的两个点,在同一位置
问题描述
我在地图上有两个点,在同一个位置,但是当我在地图上显示时,一个点叠加在另一个点上,无法同时看到两个点。我怎么解决这个问题?
解决方案
您可以为 Leaflet使用Marker Clustering 插件
var map = new L.Map("map",{preferCanvas:true}).setView([48.86, 2.35], 12),
tiles = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map),
markerClusterLayer = L.markerClusterGroup({
disableClusteringAtZoom: 13
,animate:false
}).addTo(map);
// Add vectors of the new type directly to MCG.
for (var i = 0; i < 30; i += 1) {
new L.marker(randomCoords()).addTo(markerClusterLayer);
}
function randomCoords() {
return [
48.86 + 0.1 * Math.random() - 0.05, 2.35 + 0.16 * Math.random() - 0.08
];
}
#map {
width: 800px;
height: 600px;
border: 1px solid #ccc;
}
#progress {
display: none;
position: absolute;
z-index: 1000;
left: 400px;
top: 300px;
width: 200px;
height: 20px;
margin-top: -20px;
margin-left: -100px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 4px;
padding: 2px;
}
#progress-bar {
width: 0;
height: 100%;
background-color: #76A6FC;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/0.7.2/proj4leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/leaflet.markercluster-src.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.Default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.css" rel="stylesheet"/>
<div id="map"></div>
<span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those bounds</span>
更新
您可以使用Leaflet.FeatureGroup.SubGroup:它从标记集群中动态添加/删除标记组。
希望这会帮助你。
推荐阅读
- spring - 映射 OneToMany 或 ManyToOne 未映射类时出错
- azure-cosmosdb - 基于单个属性获取最新的无重复文档
- flutter - 颤振仅禁用一侧滑动
- javascript - 从 API 返回未定义的 JSON 数据映射
- linux - 如何使用 awk 添加两列?
- javascript - 如何在 chrome 浏览器上覆盖 jquery 函数?
- google-cloud-platform - 未找到 GCP Healthcheck 外部 HTTP LoadBalancer yaml
- python - 通知弹出python selenium
- json - 尝试从 CRA 应用程序中的 json 路径加载图像时出现问题
- python - Webscrape 像thingiverse这样的产品网站