# Leaflet Animated Marker
沿轨迹带方向的动态marker,查看 [在线示例](http://gisarmory.xyz/blog/index.html?demo=LeafletRouteAnimate)。
## 如何使用
参考如下代码,即可实现动态marker绘制,并动态绘制已行走轨迹。
var carIcon = L.icon({
iconSize: [37, 26],
iconAnchor: [19, 13],
iconUrl: '../img/car.png'
})
// 动态marker
var animatedMarker = L.animatedMarker(routeLine.getLatLngs(), {
icon: carIcon,
playCall: updateRealLine
}).addTo(map)
var newLatlngs = [routeLine.getLatLngs()[0]]
// 绘制已行走轨迹线(橙色那条)
function updateRealLine(latlng) {
newLatlngs.push(latlng)
realRouteLine.setLatLngs(newLatlngs)
}
## 播放状态控制
// 开始
function startClick() {
animatedMarker.start();
}
// 暂停
function pauseClick() {
animatedMarker.pause();
}
// 停止
function stopClick() {
newLatlngs = []
animatedMarker.stop();
}
## 参考链接
https://github.com/openplans/Leaflet.AnimatedMarker
https://github.com/mohsen1/leaflet-moving-marker
没有合适的资源?快使用搜索试试~ 我知道了~
Leaflet.AnimatedMarker:动态marker
共4个文件
png:1个
md:1个
js:1个
需积分: 47 8 下载量 64 浏览量
2021-05-07
21:57:56
上传
评论
收藏 9KB ZIP 举报
温馨提示
Leaflet Animated Marker 沿轨迹带方向的动态marker,查看 。 如何使用 参考如下代码,即可实现动态marker绘制,并动态绘制已行走轨迹。 var carIcon = L.icon({ iconSize: [37, 26], iconAnchor: [19, 13], iconUrl: '../img/car.png' }) // 动态marker var animatedMarker = L.animatedMarker(routeLine.getLatLngs(), { icon: carIcon, playCall: updateRealLine }).addTo(map) var newLatlngs = [routeLine.getLatLngs()[0]] // 绘制已行走轨迹线(橙色那条) function
资源推荐
资源详情
资源评论
收起资源包目录
Leaflet_AnimatedMarker-master.zip (4个子文件)
Leaflet.AnimatedMarker-master
src
AnimatedMarker.js 6KB
example
index.html 3KB
car.png 4KB
README.md 1KB
共 4 条
- 1
资源评论
陶涵煦
- 粉丝: 27
- 资源: 4654
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功