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

[uiwjs]

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

[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 类型复制来源于官网，示例中可以是 坐标参数？

react-amap/packages/types/src/overlay.d.ts

Line 161 in 879d6cd

moveTo(targetPosition: MoveToOptions, opts?: MoveAlongOptions): void;

[jz-9527]

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

[jaywcjlove]

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

[jz-9527]

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