自定义传单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

您的location-pin类的CSS规则（即top和left规则）通过iconAnchor选项干扰Leaflet的定位。我认为您根本不需要它们。

一旦删除它们，iconAnchor选项将再次正常运行，并且剩下的是指定适当的值以正确放置自定义DivIcon。

根据Explanation of Leaflet Custom Icon LatLng vs XY Coordinates中的建议，一个有用的技巧是在与自定义图标的标记完全相同的纬度/经度位置添加普通的默认标记，以便您可以轻松比较两个图标提示位置。 / p>

对于您而言，iconAnchor: [10, 33]似乎可以正常工作。

更新的JSFiddle：https://jsfiddle.net/dyc7pe4s/