（完美解决！）关于Vue+Leaflet添加market时，图片不显示的问题

留言

解决1

重新引用一下icon，这样做的问题是引用的图片，默认点位和图片的左上角重合，会有偏移量。
通过设置iconAnchor，改变偏移量[icon长的一半，宽]，这样默认icon的角点和坐标的偏移量会缩小到2px内。要去精度高的需要在调一调

1
2
3
4
5
6
7
8
9
10
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文件
覆盖以下样式

1
2
3
4
/* Default icon URLs */
.leaflet-default-icon-path {
	background-image: url(https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/images/marker-icon.png);
}
实测好久终于解决了！！！！！！