react使用高德地图选点

要在 React 中使用高德地图选点，你需要先在页面中引入高德地图的 JavaScript API，然后创建一个地图实例，最后添加相应的事件监听器来实现选点功能。以下是一个简单的示例代码：

import React, { useEffect } from 'react';

function Map() {
  useEffect(() => {
    // 引入高德地图 JavaScript API
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY';
    script.async = true;
    script.onload = () => {
      // 创建地图实例
      const map = new window.AMap.Map('map-container', {
        zoom: 13,
        center: [116.397428, 39.90923],
      });

      // 添加点击事件监听器
      map.on('click', (e) => {
        const lngLat = e.lnglat;
        console.log(lngLat.getLng(), lngLat.getLat());
      });
    };
    document.body.appendChild(script);

    return () => {
      // 卸载组件时清除地图实例
      if (window.AMap) {
        window.AMap.destroy();
        window.AMap = null;
      }
    };
  }, []);

  return <div id="map-container" style={{ width: '100%', height: '500px' }} />;
}

export default Map;

在上述代码中，`YOUR_API_KEY` 需要替换成你在高德开放平台申请的 API KEY。当用户在地图上点击时，控制台会输出选中点的经纬度坐标。你可以根据自己的需求，将这些坐标保存到组件状态或者传递给父组件。