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

原创

已于 2022-03-02 19:15:19 修改 · 4k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2021-04-14 17:24:51 首次发布

本文介绍了如何调整Leaflet地图中marker图标的位置，解决图标默认位置偏移问题，一是通过设置iconAnchor属性精确控制，二是覆盖leaflet.css中的默认样式。完美解决方案提供给高级需求用户。

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

	  import icon from 'leaflet/dist/images/marker-icon.png'

	  const DefaultIcon = L.icon({
   
   
        iconUrl: icon,
        iconAnchor: [10, 41