typescript 如何在Angular上实现小叶移动标记的movingMarker？

jmo0nnb3 于 2023-01-03 发布在 TypeScript

关注(0)|答案(2)|浏览(108)

我试图实现移动标记的leaflet移动制造商，但发生了一些错误。

import {movingMarker} from 'leaflet-moving-marker'

    var myMovingMarker = L.movingMarker([[48.8567, 2.3508],[50.45, 30.523333]],
      [20000]).addTo(this.map);

myMovingMarker.start();

我已经实现了如下，它是说，movingMarker不存在的类型导入.../@类型/传单/索引。

typescript

来源：https://stackoverflow.com/questions/65492199/how-to-implement-movingmarker-of-leaflet-moving-marker-on-angular

2条答案

按热度按时间

tcomlyy61#

您可以使用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>

Demo

赞(0）回复(0）举报 2023-01-03

u3r8eeie2#

你可以使用Leaflet.MoveMarker这是一个新的插件由我.有相当完整的功能，你可以看到示例代码在github或codesandbox

赞(0）回复(0）举报 2023-01-03

我来回答

typescript 如何在Angular上实现小叶移动标记的movingMarker？

2条答案

相关问题

热门标签

最新问答