如何解决如何在 Angular 上实现传单移动标记的移动标记?
我正在尝试实现传单移动标记的移动制造商,但发生了一些错误。
import {movingMarker} from 'leaflet-moving-marker'
var myMovingMarker = L.movingMarker([[48.8567,2.3508],[50.45,30.523333]],[20000]).addTo(this.map);
myMovingMarker.start();
我已经实现如下,它是说在导入类型上不存在移动标记 .../@types/leaflet/index.
解决方法
您可以使用 leaflet.animatedmarker
。它与您尝试使用的库相似,并且与最新的传单版本兼容。
安装插件:
npm i leaflet.animatedmarker
导入插件:
import "leaflet.animatedmarker/src/AnimatedMarker";
当组件挂载时创建并保存插件实例:
...
animatedMarker;
ngOnInit() {
...
const line = L.polyline(
[
[40.6851,-73.94136],[40.68576,-73.94149],[40.68649,-73.94165]
],{
color: "#02929b",weight: 1.5
}
).addTo(map);
this.animatedMarker = L.animatedMarker(line.getLatLngs(),{
autoStart: false,icon
});
map.addLayer(this.animatedMarker);
const group = new L.featureGroup([this.animatedMarker]);
map.fitBounds(group.getBounds());
}
startAnimation() {
this.animatedMarker.start();
}
按下按钮开始动画:
<button (click)="startAnimation()">Start animation</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。