简单Leaflet.js标记放置(Simple Leaflet.js Marker Placemen

我使用的是开源Leaflet.js库创建一个简单的地图。

我想，虽然解决特定问题。 标记被绑定到一个地图，这是有道理的在一个特定的纬度/经度，但我需要能够做一个标记有从另一个标记固定偏移的位置，而不会被绑定到一个纬度/经度中心。

因此，例如，地图可以是这样的：

但是，当你缩小，它会是这样的：

---

我真正想要的是为固定从左边的标记偏移正确的标记走，而不是绑在经纬度，因为这样的：

---

我试着尝试unproject但我相信我要下去的如何处理这种错误的道路。 这是非常规的我在做什么，但如果任何人有任何见解，我怎么能做到这一点，将不胜感激。

Answer 1:

除了project()和unproject()方法来计算第二个标记，你还可以听缩放地图上的事件和更新，以保持适当的距离，以像素为第二标记的位置的位置。

看看下面的例子。

 var marker; var pos = L.latLng(28.478226,-16.313488); var mymap = L.map('mapid').setView(pos, 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { maxZoom: 18, attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', id: 'mapbox.streets' }).addTo(mymap); L.marker(pos).addTo(mymap); setLinkedMarkerAtDistance(180); mymap.on('zoomstart', function() { if (marker) { mymap.removeLayer(marker); } }); mymap.on('zoomend', function() { setLinkedMarkerAtDistance(180); }); function setLinkedMarkerAtDistance(d) { var p = mymap.project(pos, mymap.getZoom()); var p1 = p.add(L.point(d,0)); var pos1 = mymap.unproject(p1, mymap.getZoom()); if (marker) { marker.setLatLng(pos1).addTo(mymap); } else { marker = L.marker(pos1).addTo(mymap); } } 

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script> <div id="mapid" style="width: 600px; height: 400px;"> 

我希望这有帮助！

Answer 2:

这听起来像一个XY问题，对我说：你想显示一些额外的信息（可能是寻找类似于正常标记）旁边的一个标志物（有一些像素偏移），并尝试用另一个标记B; 但标记B是依赖于纬度/经度坐标而不是像素偏移，所以你问如何使用帮助unproject 。

为了实现你的原始目标，传单DivIcon会确实是一个更合适的解决方案：一部分<div>将包含您的实际标记图标，而另一部分将包含您额外的信息。 这样一来，它总是保持在期望位置，而无需计算任何（未）投影和不参与任何JS事件侦听器：

 var paris = [48.86, 2.35]; var map = L.map('map').setView(paris, 11); var divIcon = L.divIcon({ html: ` <img src="https://unpkg.com/leaflet@1.3.4/dist/images/marker-icon.png" /> <div class="extra-info"> Some extra info </div> `, className: 'my-div-icon', iconAnchor: [12, 41] }); L.marker(paris, { icon: divIcon }).addTo(map); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); 

 html, body, #map { height: 100%; margin: 0; } .extra-info { position: absolute; left: 188px; bottom: -20px; min-width: 120px; background: yellow; border: 1px solid red; } 

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script> <div id="map"></div> 

一个更合适的解决办法是使用单张工具提示 ，通常与预定义的offset ， permanent: true选项，具体的direction和自定义样式（与className ）：

 var paris = [48.86, 2.35]; var map = L.map('map').setView(paris, 11); L.marker(paris).bindTooltip('Some extra info', { offset: [188, 0], className: 'my-tooltip', permanent: true, direction: 'right', interactive: true }).addTo(map); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); 

 html, body, #map { height: 100%; margin: 0; } .leaflet-tooltip.my-tooltip { background-color: yellow; border: 1px solid red; box-shadow: none; } .leaflet-tooltip.my-tooltip::before { content: none; } 

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script> <div id="map"></div> 

然后，如果你真的想你额外的信息被样式和操作像一个正常的传单标记，另一种可能的解决方案是使用自定义标记与修改iconAnchor ，考虑到期望的像素偏移：

 var paris = [48.86, 2.35]; var map = L.map('map').setView(paris, 11); var OffsetIcon = L.Icon.Default.extend({ options: { // Subtract your desired offset. iconAnchor: [12 - 188, 41] } }); L.marker(paris).addTo(map); L.marker(paris, { icon: new OffsetIcon() }).addTo(map); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); 

 html, body, #map { height: 100%; margin: 0; } 

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script> <div id="map"></div> 

文章来源: Simple Leaflet.js Marker Placement