关于使用自定义组件的疑问

[rubickkcibur]

非常感谢作者贡献了amap的react封装。我在项目中使用时需要使用高德的路径规划功能，但是本库貌似没有提供相应的接口

在阅读说明书的过程中发现作者表示可以使用Map组件返回的地图实例进行任何原生API支持的事，但没有具体使用说明，不知作者是否可以以AMap.Driving为例指导下如何自定义使用高德原生API,万分感谢

[jaywcjlove]

@rubickkcibur 这个非常简单，写了个小实例 https://codesandbox.io/s/react-amap-issue-22-yt5wy-yt5wy?file=/src/App.js

上面实例来源于官方实例 https://lbs.amap.com/api/jsapi-v2/example/driving-route/waypoint

import React from "react";
import { Map } from "@uiw/react-amap";

export default function App() {
  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <div
        id="panel"
        style={{
          width: 210,
          position: "absolute",
          right: 0,
          zIndex: 999,
          textAlign: "left"
        }}
      ></div>
      <div style={{ height: 630 }}>
        <Map center={[116.397428, 39.90923]} zoom={13}>
          {({ AMap, map, container }) => {
            if (map && AMap) {
              AMap.plugin(["AMap.Driving"], () => {
                //构造路线导航类
                var driving = new AMap.Driving({
                  map: map,
                  panel: "panel"
                });

                // 根据起终点经纬度规划驾车导航路线
                driving.search(
                  new AMap.LngLat(116.379028, 39.865042),
                  new AMap.LngLat(116.427281, 39.903719),
                  { waypoints: [new AMap.LngLat(116.379028, 39.885042)] },
                  (status, result) => {
                    // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                    if (status === "complete") {
                      // log.success('绘制驾车路线完成')
                    } else {
                      // log.error('获取驾车数据失败：' + result)
                    }
                  }
                );
              });
            }
          }}
        </Map>
      </div>
    </div>
  );
}

我看你 AMap.Driving 报错，这个是我定义的类型没有定义，欢迎提交 PR。

[rubickkcibur]

非常感谢作者的解答，我在本地实行项目中还是遇到了一些问题：
1、我首先将作者的例子copy到本地的App.tsx和index.tsx中运行，编译不能成功，报错如下

2、我将App.tsx重命名为App.js，内容没有改动，重启项目，项目正常运行
我猜测在tsx文件中使用AMap插件会导致fail，或许与eslint设置有关？不知作者能否帮忙解答一下，万分感激

[rubickkcibur]

目前问题解决了,在{ AMap, map, container }后面加 :any 规避掉类型检查可以让代码执行。

[jaywcjlove]

@rubickkcibur Upgrade+ @uiw/react-amap@1.7.4