React 高德地图地址逆编码实战指南

在 React 中使用高德地图进行地址逆编码可以按照以下步骤进行：

安装相关依赖

使用 npm 或 yarn 安装 react-amap 和 react-amap-plugin-geolocation 两个依赖：

npm install react-amap react-amap-plugin-geolocation

导入组件

在需要使用的组件中导入相关组件：

import React, { useState } from 'react';
import { Input } from 'antd';
import { AMapGeolocation, AMap } from 'react-amap';
import { AMapGeocoder } from 'react-amap-plugin-geocoder';

设置地图

在组件中设置地图组件，并使用 useState 钩子来保存经纬度和地址信息：

const Map = () => {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    address: null,
  });

  const plugins = ['ToolBar'];

  const mapEvents = {
    created: (mapInstance) => {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
        buttonPosition: 'RB',
        zoomToAccuracy: true,
      });
      geolocation.getCurrentPosition();
      AMap.event.addListener(geolocation, 'complete', (data) => {
        setLocation({
          latitude: data.position.lat,
          longitude: data.position.lng,
          address: '',
        });
      });
      AMap.event.addListener(geolocation, 'error', () => {
        console.log('定位失败');
      });
    },
  };

  return (
    <div style={{ width: '800px', height: '400px' }}>
      <AMap
        plugins={plugins}
        center={[116.397428, 39.90923]}
        zoom={13}
        events={mapEvents}
      >
        <AMapGeolocation />
        <AMapGeocoder
          position={{ longitude: location.longitude, latitude: location.latitude }}
          callback={(address) => {
            setLocation((prev) => ({ ...prev, address }));
          }}
        />
      </AMap>
    </div>
  );
};

在这个例子中，我们使用了高德地图的定位功能，通过 geolocation.getCurrentPosition() 来获取当前位置的经纬度信息，并在定位成功后将经纬度信息保存到 location 状态中。

设置输入框

在组件中设置一个输入框，当用户输入地址时，使用 AMapGeocoder 组件将地址转换为经纬度信息，并更新 location 状态中的经纬度和地址信息：

const Map = () => {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    address: null,
  });

  const plugins = ['ToolBar'];

  const mapEvents = {
    created: (mapInstance) => {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
        buttonPosition: 'RB',
        zoomToAccuracy: true,
      });
      geolocation.getCurrentPosition();
      AMap.event.addListener(geolocation, 'complete', (data) => {
        setLocation({
          latitude: data.position.lat,
          longitude: data.position.lng,
          address: '',
        });
      });
      AMap.event.addListener(geolocation, 'error', () => {
        console.log('定位失败');
      });
    },
  };

  const handleInputChange = (e) => {
    const address = e.target.value;
    if (address) {
      const geocoder = new AMap.Geocoder();
      geocoder.getLocation(address, (status, result) => {
        if (status === 'complete' && result.geocodes.length) {
          const { lat, lng } = result.geocodes[0].location;
          setLocation({ latitude: lat, longitude: lng, address });
        } else {
          console.log('无法获取地址信息');
        }
      });
    } else {
      setLocation((prev) => ({ ...prev, address }));
    }
  };

  return (
    <div style={{ width: '800px', height: '400px' }}>
      <Input
        placeholder='请输入地址'
        style={{ width: '400px', marginBottom: '20px' }}
        value={location.address}
        onChange={handleInputChange}
      />
      <AMap
        plugins={plugins}
        center={[116.397428, 39.90923]}
        zoom={13}
        events={mapEvents}
      >
        <AMapGeolocation />
        <AMapGeocoder
          position={{ longitude: location.longitude, latitude: location.latitude }}
          callback={(address) => {
            setLocation((prev) => ({ ...prev, address }));
          }}
        />
      </AMap>
    </div>
  );
};

在这个例子中，我们使用了一个输入框来让用户输入地址信息，并通过 geocoder.getLocation() 方法将地址转换为经纬度信息，并更新 location 状态中的经纬度和地址信息。

结语

以上就是在 React 中使用高德地图进行地址逆编码的方法，通过 AMapGeocoder 和 AMapGeolocation 组件，我们可以很方便地实现地址逆编码和定位功能。