React项目(UmiJS)中使用高德地图

React AMap

这是一个基于 React 封装的高德地图组件.

文档地址

https://uiw.gitee.io/react-amap/#/

01、安装

npm install @uiw/react-amap --save

02、使用

在文档左侧找到需要使用的例子。在右侧直接复制对应代码。按需进行修改。

03、例子（贝塞尔曲线的使用）

import React, { useState } from "react";
import { Map, APILoader, BezierCurve } from "@uiw/react-amap";

const CarLine = () => {
    const [show] = useState(true);
    const path = [// 每个弧线段有两种描述方式
        [116.39, 39.91, 116.37, 39.91],// 起点
        // 第一段弧线
        [116.380298, 39.907771, 116.38, 39.90],// 控制点，途经点
        // 第二段弧线
        [116.385298, 39.907771, 116.40, 39.90],// 控制点，途经点// 弧线段有两种描述方式1
        // 第三段弧线
        [// 弧线段有两种描述方式2
            [116.392872, 39.887391],// 控制点
            [116.40772, 39.909252],// 控制点
            [116.41, 39.89]// 途经点
        ],
        // 第四段弧线
        [116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273]
        // 控制点，控制点，途经点，每段最多两个控制点
    ];

    const handleParams = (values) => {
        return values
    }

    return (
        <>
            <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
                <div style={{ width: "100%", height: "600px" }} >
                    <Map zoom={14} center={[116.397637, 39.900001]}>
                        <BezierCurve
                            visiable={show}
                            path={path}
                            isOutline={true}
                            outlineColor=""
                            borderWeight={3}
                            strokeColor="red"
                            strokeOpacity={1}
                            strokeWeight={6}
                            // 线样式还支持 'dashed'
                            strokeStyle="solid"
                            // strokeStyle是dashed时有效
                            strokeDasharray={[10, 10]}
                            lineJoin="round"
                            lineCap="round"
                            zIndex={50}
                        />
                    </Map>
                </div>
            </APILoader>
        </>
    );
}

export default CarLine