vue使用Leaflet.movingMarker设置自定义icon

最新推荐文章于 2024-12-04 07:30:00 发布

啊有礼貌

最新推荐文章于 2024-12-04 07:30:00 发布

阅读量1.5k

点赞数 1

分类专栏：前端学习文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43143469/article/details/123258485

版权

前端学习专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中通过引入Leaflet库和MovingMarker插件，创建移动的标记点。具体步骤包括导入所需文件，设置latlngArray坐标，使用L.Marker.movingMarker创建动态标记，并设定图标及动画效果。在需要移除时，调用removeLayer方法即可。此外，还提供了MovingMarker插件的GitHub链接供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过main.js文件引入

import 'leaflet'
import "leaflet/dist/leaflet.css"
import MovingMarker from "../src/utils/MovingMarker"

直接使用L.Marker.movingMarker创建

latlngArry = [ [lat1，lng2], [lat2，lng2], …]
vue无法通过 “…/…/xx” 定位到目标资源，可以使用require引入
移除时，只需调用this.map.removeLayer(dynamicMarkerOut )即可

let dynamicMarkerOut = L.Marker.movingMarker(latlngArray, 3000,
          {autostart: true, loop: true})
let iconOut = L.icon({
        iconUrl: require("../../assets/maker/marker-point.png"),
        iconSize: [30, 30]
      })
dynamicMarkerOut.setIcon(iconOut).addTo(this.map)