解决1
重新引用一下icon,这样做的问题是引用的图片,默认点位和图片的左上角重合,会有偏移量。
通过设置iconAnchor
,改变偏移量[icon长的一半,宽],这样默认icon的角点和坐标的偏移量会缩小到2px内。要求精度高的需要在调一调
import icon from 'leaflet/dist/images/marker-icon.png'
const DefaultIcon = L.icon({
iconUrl: icon,
iconAnchor: [10, 41]
})
L.Marker.prototype.options.icon = DefaultIcon
const marker = L.marker(that.centerPoint, {
icon: DefaultIcon
}).addTo(that.mapObj)
解决2 (完美!!!)
找到leaflet.css文件
覆盖以下样式
/* Default icon URLs */
.leaflet-default-icon-path {
background-image: url(https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/images/marker-icon.png);
}