利用插件写高德地图

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, Marker } from '@uiw/react-amap';
import './app.scss'
const Example = () => {
  const AMap = window.AMap
  const [show, setShow] = useState(true);
  const [map, setMap] = useState();
  const handleClick = (e)=>{
    let { lnglat } = e
    console.log(lnglat);
  }
  return (
    <>
      <div style={{ width: '100%', height: '100%' }}>
        <Map
          zoom={10}
          center={[116.397428, 39.90923]}
          onClick={ (e)=>{ handleClick(e) }}
        >
          <Marker
            visiable={show}
            offset={new AMap.Pixel(-10, -30)}
            position={new AMap.LngLat(116.205467, 39.907761)}
          >
            <div style={{ background: 'red', color: '#fff' }} onClick={()=>{console.log(123)}}>
              我是 Marker
            </div>
            <div style={{ background: 'red', color: '#fff',width:'100px' }} onClick={()=>{console.log(123)}}>
              我是 M20002arker
            </div>
          </Marker>
          <Marker
            visiable={show}
            offset={new AMap.Pixel(0, 0)}
            position={new AMap.LngLat(116.404438, 39.906236)}
          >
            <div style={{ background: 'red', color: '#fff' }} onClick={()=>{console.log(123)}}>
              我是 Marker
            </div>
            <div style={{ background: 'red', color: '#fff',width:'100px' }} onClick={()=>{console.log(123)}}>
              我是 M
            </div>
          </Marker>
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;