自定义传单 divIcon 缩放时不会停留在固定标记位置

Question

我制作了一个与传单地图一起使用的自定义标记，它似乎工作正常，但是当我放大和缩小地图时，它会急剧改变位置，我希望它与该位置上的点保持在应有的位置。我已经检查并尝试更改锚点和位置，但这似乎让情况变得更糟，所以我会向您展示我所拥有的，希望有人能指出我正确的方向。

\n\n

我在这里做了一个 JSFIDDLE ： http: //jsfiddle.net/qpt02Luy/1/

\n\n

html 是：

\n\n

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

\n\n

CSS 是：

\n\n

body { padding: 0; margin: 0; } html, body, #map { z-index : 1; height: 100vh; width: 100vw; }\n.location-pin {\n  display: inline-block;\n  position: relative;\n  top: 50%;\n  left: 50%;\n}\n.location-pin img {\n  width: 46px;\n  height: 46px;\n  margin: -26px 0 0 -13px;\n  z-index: 10;\n  position: absolute;\n  border-radius: 50%;\n\n  background: #32383e;\n}\n.pin {\n  width: 50px;\n  height: 50px;\n  border-radius: 50% 50% 50% 0;\n  background: #32383e;\n  position: absolute;\n  transform: rotate(-45deg);\n  left: 50%;\n  top: 50%;\n  margin: -43px 0 0 -30px;\n\n}\n.pin:after {\n  content: \'\';\n  width: 26px;\n  height: 26px;\n  margin: 2px 0 0 2px;\n  position: absolute;\n  border-radius: 50%;\n\n}\n

\n\n

JS：

\n\n

var zoom = 10;\nvar osmUrl=\'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\';\nvar osmAttrib=\'Map data \xc2\xa9 <a href="http://osm.org/copyright">OpenStreetMap</a> contributors\';\nvar osm = new L.TileLayer(osmUrl, {\n    attribution: osmAttrib,\n    detectRetina: true\n});\n\n// please replace this with your own mapbox token!\nvar token = \'pk.eyJ1IjoidGhlZGlnZ2xlcnVrIiwiYSI6ImNqcG9uZHM3eDAxcDk0Mm4wcjdsYXJ4YXoifQ.1WVGvW9ESiMWfk3F6g3UIA\';\nvar mapboxUrl = \'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}@2x?access_token=\' + token;\nvar mapboxAttrib = \'Map data \xc2\xa9 <a href="http://osm.org/copyright">OpenStreetMap</a> contributors. Tiles from <a href="https://www.mapbox.com">Mapbox</a>.\';\nvar mapbox = new L.TileLayer(mapboxUrl, {\n  attribution: mapboxAttrib,\n  tileSize: 512,\n  zoomOffset: -1\n});\n\nwindow.map = new L.Map(\'map\', {\n    layers: [mapbox],\n    minZoom: 2,\n    maxZoom: 18,\n    center: [51.505, -0.09],\n    zoom: 10,\n    zoomControl: false\n\n});\n\nvar myIcon = L.divIcon({\n    className: \'location-pin\',\n    html: \'<img src="https://www.faces2places.co.uk/img/jules.jpg"><div class="pin"></div><div class="pulse"></div>\',\n    iconSize: [30, 30],\n    iconAnchor: [18, 30]\n  });\n\n  L.marker([51.5, -0.09], {icon: myIcon}).addTo(map);\n

\n

Answer 1

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

删除它们后，该iconAnchor选项将再次正常工作，您只需指定适当的值来正确定位自定义 DivIcon。

正如Leaflet 自定义图标 LatLng 与 XY 坐标的说明中所建议的，一个有用的技巧是在与带有自定义图标的标记完全相同的 Lat/Lng 位置添加正常的默认标记，以便您可以轻松比较两个图标尖端位置。

就你而言，iconAnchor: [10, 33]似乎工作正常。

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