使用marker轨迹回放的moveAlong直接报错，使用moveTo直接跳到目标位置

[CodeMonkeyLin]

marker.moveTo(new AMap.LngLat(116, 38), 200); marker.moveAlong([new AMap.LngLat(116, 38)], 200);

[jaywcjlove]

@CodeMonkeyLin 请使用 https://codesandbox.io 提供示例

[CodeMonkeyLin]

我使用moveAlong，一直报这个错

[jaywcjlove]

@CodeMonkeyLin 请提供示例

[CodeMonkeyLin]

import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import {
  APILoader,
  Provider,
  useMapContext,
  useMap,
  Map,
  Marker,
} from '@uiw/react-amap';
const MapDemo = () => {
  const warpper = useRef(null);
  const { map, state } = useMapContext();
  const { setContainer } = useMap({
    container: warpper.current,
    center: [104.937478, 35.439575],
    zoom: 5,
  });

  useEffect(() => {
    if (warpper.current) {
      setContainer(warpper.current);
    }
  }, [warpper.current]);

  return (
    <div ref={warpper}>
      <Marker
        position={[104.937478, 35.439575]}
        content='<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>'
        ref={(instance) => {
          if (instance?.marker) {
            console.log(instance?.marker.moveAlong);
            instance?.marker.moveAlong([new AMap.LngLat(116, 38)], 200);
          }
        }}
      ></Marker>
    </div>
  );
};

export default function App() {
  return (
    <div style={{ height: 800 }}>
      <APILoader
        plugin={['AMap.MoveAnimation']}
        akay="a7a90e05a37d3f6bf76d4a9032fc9129"
      >
        <Provider>
          <MapDemo />
        </Provider>
      </APILoader>
    </div>
  );
}

[CodeMonkeyLin]

@jaywcjlove https://codesandbox.io/ 我刚才一直打不开，上面的案例直接复制粘贴就可以，麻烦看下，谢谢

[CodeMonkeyLin]

import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import {
  APILoader,
  Provider,
  useMapContext,
  useMap,
  Map,
  Marker,
} from '@uiw/react-amap';
const MapDemo = () => {
  const warpper = useRef(null);
  const { map, state } = useMapContext();
  const { setContainer } = useMap({
    container: warpper.current,
    center: [104.937478, 35.439575],
    zoom: 5,
  });

  useEffect(() => {
    if (warpper.current) {
      setContainer(warpper.current);
    }
  }, [warpper.current]);

  return (
    <div ref={warpper}>
      <Marker
        position={[104.937478, 35.439575]}
        content='<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>'
        ref={(instance) => {
          if (instance?.marker) {
            console.log(instance?.marker.moveAlong);
            instance?.marker.moveTo(new AMap.LngLat(116, 38), 200);
          }
        }}
      ></Marker>
    </div>
  );
};

export default function App() {
  return (
    <div style={{ height: 800 }}>
      <APILoader
        plugin={['AMap.MoveAnimation']}
        akay="a7a90e05a37d3f6bf76d4a9032fc9129"
      >
        <Provider>
          <MapDemo />
        </Provider>
      </APILoader>
    </div>
  );
}

这个是moveTo案例

[jaywcjlove]

@CodeMonkeyLin 你这API 都用错了吧 第二个参数是个 object 对象

[jz-9527]

你好，为什么我在ts中使用时，它告诉我 然后我去查看了方法的ts类型 /**

• 用于实现点标记沿线段或者路径轨迹移动的动画基类，可用于满足轨迹回放、实时轨迹等场景。
• MoveAnimation无需单独声明或初始化，Marker、Text、LabelMarker均已继承了 MoveAnimation的实现。 */ class MoveAnimation { / 重新启动点标记动画，加载 AMap.MoveAnimation 后可以使用 */ resumeMove(): void; /* 停止点标记动画，加载 AMap.MoveAnimation 后可以使用 / stopMove(): void; / 开启点标记动画，加载 AMap.MoveAnimation 后可以使用 */ startMove(): void; / 以给定时间移动点标记到指定位置，加载 AMap.MoveAnimation 后可以使用 */ moveTo(targetPosition: MoveToOptions, opts?: MoveAlongOptions): void; } interface MoveAlongObj { } type MoveToOptions = { /* 每段动画持续时长, 单位：ms / duration?: number; / 动画速度，已废弃 */ speed?: number; / easing 时间函数 */ easing?: EasingCallback; /* 覆盖物是否沿路径旋转 / autoRotation?: boolean; } / 时间函数回调 */ type EasingCallback = (passedTime: number) => number; / MoveAnimation 回调函数 */ type AnimationCallback = (index: number, data: LngLat) => number; interface MoveAlongOptions { /* 每段动画持续时长, 单位：ms / duration?: number | AnimationCallback; / 每段动画速度，已废弃 */ speed?: number | AnimationCallback; / easing 时间函数 */ easing?: EasingCallback; /* 动画是否循环 / circlable?: boolean; / 延迟动画时长 */ delay?: number | AnimationCallback; /* 每段完整动画间隔时长 / aniInterval?: number; /* 覆盖物是否沿路径旋转 / autoRotation?: boolean; } moveTo()方法的入参类型根本不能传坐标，这和官方给的案例完全是错误的

[jaywcjlove]

@jz-9527 类型复制来源于官网，示例中可以是 坐标参数？

https://github.com/uiwjs/react-amap/blob/879d6cdd07caf08a394a0d031ad6d645d443ed92/packages/types/src/overlay.d.ts#L161

[jz-9527]

高德官网的解释是第一个参数是目标经纬度，第二个参数是时间动画等相关属性的对象，但是在这个插件中使用，ts是完全错误的

[jaywcjlove]

@jz-9527 升级到 v5.0.4 还有问题吗

[jz-9527]

换了种实现方式，没试这种了