Пользовательский листок divIcon не остается в фиксированном положении маркера при увеличении

Question

Я сделал пользовательский маркер для использования с листовыми картами, он, кажется, работает нормально, но когда я увеличиваю и уменьшаю масштаб карты, он резко меняет положение, и я хотел бы, чтобы он оставался там, где он должен быть с точкой на позиции,Я проверил и попытался изменить опорные точки и положение, но, кажется, это только ухудшает ситуацию, поэтому я покажу вам, что у меня есть, и, надеюсь, кто-то может указать мне правильное направление.

Я сделал JSFIDDLE здесь:http://jsfiddle.net/qpt02Luy/1/

и html:

<div id="map"></div>

, а CSS:

body { padding: 0; margin: 0; } html, body, #map { z-index : 1; height: 100vh; width: 100vw; }
.location-pin {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
}
.location-pin img {
  width: 46px;
  height: 46px;
  margin: -26px 0 0 -13px;
  z-index: 10;
  position: absolute;
  border-radius: 50%;

  background: #32383e;
}
.pin {
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0;
  background: #32383e;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -43px 0 0 -30px;

}
.pin:after {
  content: '';
  width: 26px;
  height: 26px;
  margin: 2px 0 0 2px;
  position: absolute;
  border-radius: 50%;

}

JS:

var zoom = 10;
var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
    attribution: osmAttrib,
    detectRetina: true
});

// please replace this with your own mapbox token!
var token = 'pk.eyJ1IjoidGhlZGlnZ2xlcnVrIiwiYSI6ImNqcG9uZHM3eDAxcDk0Mm4wcjdsYXJ4YXoifQ.1WVGvW9ESiMWfk3F6g3UIA';
var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}@2x?access_token=' + token;
var mapboxAttrib = 'Map data © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors. Tiles from <a href="https://www.mapbox.com">Mapbox</a>.';
var mapbox = new L.TileLayer(mapboxUrl, {
  attribution: mapboxAttrib,
  tileSize: 512,
  zoomOffset: -1
});

window.map = new L.Map('map', {
    layers: [mapbox],
    minZoom: 2,
    maxZoom: 18,
    center: [51.505, -0.09],
    zoom: 10,
    zoomControl: false

});

var myIcon = L.divIcon({
    className: 'location-pin',
    html: '<img src="https://www.faces2places.co.uk/img/jules.jpg"><div class="pin"></div><div class="pulse"></div>',
    iconSize: [30, 30],
    iconAnchor: [18, 30]
  });

  L.marker([51.5, -0.09], {icon: myIcon}).addTo(map);

Answer 1

Правила CSS для вашего класса location-pin (а именно правила top и left) влияют на позиционирование листовки через параметр iconAnchor. Я не думаю, что они вам нужны вообще.

Как только вы удалите их, опция iconAnchor снова будет работать как обычно, и вам останется указать соответствующие значения для правильного позиционирования вашего пользовательского DivIcon.

Как предложено в Объяснение пользовательского значка листовки LatLng против XY координат , полезный трюк состоит в том, чтобы добавить обычный маркер по умолчанию в том же месте Lat / Lng, что и маркер с вашим пользовательским значком, чтобы Вы можете легко сравнить оба положения кончиков пиктограмм.

В вашем случае iconAnchor: [10, 33], кажется, работает нормально.

Обновлен JSFiddle: https://jsfiddle.net/dyc7pe4s/