我制作了一个用于传单 map 的自定义标记，它似乎工作正常，但是当我放大和缩小 map 时，它的位置会发生巨大变化，我希望它保持在该位置上的点应有的位置.我已经检查并尝试更改 anchor 和位置，但这似乎只会让情况变得更糟，所以我会向您展示我所拥有的，希望有人能指出我正确的方向。
我在这里做了一个 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);
最佳答案
location-pin 类的 CSS 规则(即 top 和 left 规则)通过 iconAnchor 干扰 Leaflet 定位。选项。我认为您根本不需要它们。
删除它们后，iconAnchor 选项将再次正常工作，您只需指定适当的值即可正确定位您的自定义 DivIcon。
如 Explanation of Leaflet Custom Icon LatLng vs XY Coordinates 中的建议, 一个有用的技巧是在与带有自定义图标的标记完全相同的 Lat/Lng 位置添加一个正常的默认标记，这样您就可以轻松比较两个图标的尖端位置。
在您的情况下，iconAnchor: [10, 33] 似乎工作正常。
更新的 JSFiddle:https://jsfiddle.net/dyc7pe4s/
关于javascript - 缩放时自定义传单 divIcon 不会停留在固定标记位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54328065/