Leaflet.AnimatedMarker：为地图上的标记添加生动动画的开源神器

最新推荐文章于 2025-03-19 22:18:40 发布

范垣楠Rhoda

最新推荐文章于 2025-03-19 22:18:40 发布

阅读量802

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00283/article/details/141350352

版权

Leaflet.AnimatedMarker：为地图上的标记添加生动动画的开源神器

项目地址:https://gitcode.com/gh_mirrors/le/Leaflet.AnimatedMarker

项目介绍

Leaflet.AnimatedMarker 是一个基于著名的 Leaflet JavaScript 地图库的插件，它为地图上的标记点引入了动态效果。通过这个插件，开发者可以轻松地使地图标记以各种动画方式淡入、淡出或移动，从而增加了交互性和视觉吸引力。适合用于旅行路线展示、实时位置追踪以及任何希望地图元素具备动态特性的应用中。

项目快速启动

要快速启动并运行 Leaflet.AnimatedMarker，首先确保你的项目已经准备好了 Leaflet 的基础环境。接下来是简单的集成步骤：

安装

你可以直接从 GitHub 下载或者通过 npm 获取该插件：

npm install leaflet-animatedmarker --save

或手动下载并包含在你的项目中。

引入并使用

在 HTML 文件中引入 Leaflet 和 Leaflet.AnimatedMarker：

<!-- 引入 Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<!-- 引入 Leaflet.AnimatedMarker -->
<script src="path/to/Leaflet.AnimatedMarker.js"></script>

然后，在你的 JavaScript 中创建一个动效标记：

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © OpenStreetMap contributors',
    maxZoom: 18,
}).addTo(map);

// 创建带有动画的标记
var animatedMarker = L.animatedMarker([-37.81, 144.96], {
    pulseColor: 'red',
    duration: 2000,
    repeatDelay: 500,
}).addTo(map);

这段代码会在指定位置创建一个红色脉冲动画的标记。