leaflet运动轨迹

nI是我致命的伤囍

已于 2022-08-02 17:19:52 修改

阅读量1.4k

点赞数 1

文章标签： javascript 前端 vue.js

于 2022-08-02 17:17:14 首次发布

原创

本文链接：https://blog.csdn.net/bly802337/article/details/126126283

版权

本文档介绍如何在Vue+Leaflet应用中结合MovingMarker插件，展示如何实现在OpenStreetMap（OSM）地图上让标记动态移动的效果。详细步骤包括引用必要的库文件和核心的MovingMarker.js，以及提供了一个完整的示例代码。

摘要由CSDN通过智能技术生成

Leaflet中使用MovingMarker插件实现标记移动

**
场景
Vue+Leaflet实现加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394

在上面的基础上，怎样使用插件MovingMarker实现标记移动效果。

效果
在这里插入图片描述

实现
在这里插入图片描述

1、插件地址

https://github.com/ewoken/Leaflet.MovingMarker

2、下载仓库代码，复制其MovingMarker.js核心文件
在这里插入图片描述

3、引入leaflet所需的文件以及该js文件

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script type="text/javascript" src="./js/MovingMarker.js"></script>

4、完整示例代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet移动点位(轨迹回放效果)</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        html,
        body,
        #map {
     
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>