React 使用高德地图实现标记地图点位

import { Map, Marker } from '@uiw/react-amap'; // 需npm安装
import { APILoader } from '@uiw/react-amap-api-loader'; // 需npm安装
import React from 'react';
import styles from '../pages/Welcome.less';

const MarkerMap: React.FC = () => {
  return (
    <>
      <Marker title="北京市" position={new AMap.LngLat(116.405285, 39.904989)} />
      <Marker title="张家口" position={new AMap.LngLat(114.89, 40.77)} />
      <Marker title="天津" position={new AMap.LngLat(117.2, 39.09)} />
      <Marker title="宁夏" position={new AMap.LngLat(106.26, 38.47)} />
      <Marker title="上海" position={new AMap.LngLat(121.47, 31.23)} />
      <Marker title="唐山" position={new AMap.LngLat(118.18, 39.63)} />
      <Marker title="四川" position={new AMap.LngLat(116.37, 39.95)} />
    </>
  );
};


const Welcome: React.FC = () => {
  return (
    <>
      <APILoader akay="01aaxxxxxxxxxxxxxx"> // SDK加载 akey需要去官网认证申请
        <div className={styles.div1} style={{ width: '500px', height: '500px' }}>
          <Map zoom={4} mapStyle={'amap://styles/blue'}> // Map需嵌套在APILoader里
            <MarkerMap />
          </Map>
        </div>
      </APILoader>
    </>
  );
};

效果图

欢迎大家指正！！！