简单的Leaflet.js标记放置 [英] Simple Leaflet.js Marker Placement

问题描述

我正在使用开源Leaflet.js库来创建简单的地图.

I'm using the open source Leaflet.js library to create a simple map.

不过，我正在尝试解决一个特定的问题.标记被绑定到地图上的特定纬度/经度，这是有道理的，但是我需要能够使一个标记相对于另一个标记具有固定的偏移位置，而不必将其与纬度/经度中心绑定.

I'm trying to solve a specific problem though. Markers are tied to a specific lat/lng on a map, which makes sense, but I need to be able to make a marker have a fixed offset position from another marker, without it being tied to a lat/lng center.

例如，地图可能如下所示:

So for example, the map may look like this:

但是当您缩小时，它看起来像这样:

But when you zoom out, it'll look like this:

我真正想要的是将右标记与左标记保持固定的偏移量，而不是像这样绑在latlng上:

What I actually want is for the right marker to be a fixed offset away from the left marker, instead of being tied to a latlng, as such:

我已经尝试过取消项目，但我相信我正在走错误的处理方式.我正在做的事与众不同，但是如果有人对我该怎么做有任何见解，将不胜感激.

I've tried experimenting with unproject but I believe I'm going down the wrong path of how to handle this. It's unconventional what I'm doing but if anyone has any insight into how I could do this, it would be greatly appreciated.

推荐答案

除了project()和unproject()方法来计算第二个标记的位置，您还可以侦听地图上的缩放事件并更新地图的位置.第二个标记，以保持所需的像素距离.

In addition to project() and unproject() methods to calculate position of second marker you can also listen to zoom events on the map and update the position of the second marker in order to keep the desired distance in pixels.

看看下面的例子.

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;">

我希望这会有所帮助！

I hope this helps!

这篇关于简单的Leaflet.js标记放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！