带传单的地图：地图上的两个点，在同一位置

Posted 2023-04-14

【中文标题】带传单的地图：地图上的两个点，在同一位置

【英文标题】：Map with leaflet: two points on the map, in the same location

【发布时间】：2020-04-08 19:36:37

【问题描述】：

我在地图上有两个点，在同一个位置，但是当我在地图上显示时，一个点叠加在另一个点上，无法同时看到两个点。 我该如何解决这个问题？

【参考方案1】：

您可以将Marker Clustering plugin 用于传单

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: '&copy; <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 ：它从标记集群中动态添加/删除标记组。

Live Demo

希望对你有帮助。

【讨论】：

嗨，拉胡尔，谢谢。我有一层儿科和另一层牙医。当我点击儿科时，它会在地图上显示城市中所有有儿科的位置，牙医也是如此。一个特定的地方 Rua X, number 1 提供这两种服务会发生什么，如果我点击儿科，然后点击牙医，牙医会覆盖儿科。因为它们是同一个地方的点，所以不要同时显示。每个点都来自不同的层。 L.markerClusterGroup 只能用于同一层的点。你知道我该怎么做吗？