高德地图(react_amap)之正逆地理位置

实现功能：

• 地址栏输入，模糊匹配
• 地图添加marker标注，自定义样式
• 地址栏下拉框选择后，标注更新到对应地图位置
• 拖动标注，更新地址栏详细地址

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Map, Marker } from 'react-amap'
import { Button } from 'antd'

export class Amap extends Component {
  constructor(props) {
    super(props)
    this.state = {
      position: { longitude: 116.3, latitude: 39.9246 },    //地图和标注的中心位置
      geocoder: '',         //保存地理编码对象
      searchContent: '',    //搜索框内容
    }
  }

  placeSearch = (e) => {
    this.setState({ searchContent: e })
  }

  componentDidMount(){
    const { locateInfo, geocoder } = this.props
    this.setState({
      searchContent: locateInfo.address
    })
  }

  render() {
    const that = this
    const { position, searchContent } = this.state
    const markerEvents = {
      //拖拽标注后获取地理位置和经纬度坐标
      dragend: (e) => {
        this.state.geocoder.getAddress(e.lnglat, function (status, result) {
          if (status === 'complete' && result.regeocode) {
            that.setState({
              searchContent: result.regeocode.formattedAddress
            })
          }
        })
      }
    }

    const mapEvents = {
      created: (e) => {
        let auto
        let geocoder
        //输入提示插件
        window.AMap.plugin('AMap.Autocomplete', () => {
          auto = new window.AMap.Autocomplete({ input: 'tipinput' });
        })
        //正逆地理位置
        window.AMap.plugin(["AMap.Geocoder"], function () {
          geocoder = new window.AMap.Geocoder({
            radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
            extensions: "all"//返回地址描述以及附近兴趣点和道路信息，默认"base"
          });
          that.setState({
            geocoder: geocoder
          })
        });

        //POI搜索插件
        window.AMap.plugin('AMap.PlaceSearch', () => {
          let place = new window.AMap.PlaceSearch({})
          let _this = this
          //选择地点
          window.AMap.event.addListener(auto, "select", (e) => {
            place.search(e.poi.name)
            //根据经纬度获取地理位置对象
            geocoder.getAddress(e.poi.location, function (status, result) {
              if (status === 'complete' && result.regeocode) {
                //更新标注位置和地图中心位置
                that.setState({
                  position: { longitude: e.poi.location.lng, latitude: e.poi.location.lat },
                  zoom: 18,
                  searchContent: e.poi.name
                })
              }
            })
          })
        })
        //首次进入定位地图
        const { searchContent } = that.state
        geocoder.getLocation(searchContent, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // result中对应详细地理坐标信息
            const address = result.geocodes
            
            that.setState({
              position: { longitude: result.geocodes[0].location.lng, latitude: result.geocodes[0].location.lat },
              zoom: 18
            }) 
          }
        })
      }
    }

    return (
      <div className="amap-wrap">
        <div className="amap-content">
          <div className="amap-left">
            <span><i>*</i>详细地址</span>
          </div>
          <div className="amap-right">
            <div className="amap-input">
              <input id="tipinput"
                onChange={(e) => this.placeSearch(e.target.value)}
                value={searchContent} />
            </div>
            <div id="amap">
              <Map
                amapkey={'788e08def03f95c670944fe2c78fa76f'}
                plugins={this.mapPlugins}
                events={mapEvents}
                center={position}
                useAMapUI={true}
                zoom={12}>
                <Marker
                  position={position}
                  draggable={true}
                  events={markerEvents}
                >
                  <div className="amap-marker"></div>
                </Marker>
              </Map>
            </div>
            <div className="amap-btn">
              <Button onClick={()=>{
                this.props.handleCancel()
              }}>取消</Button>
              <Button type="primary" onClick={()=>{
                this.props.handleOk(position, searchContent)
              }}>确定</Button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
})

const mapDispatchToProps = dispatch => {
  return {
    dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Amap)

[图片上传中...(WechatIMG224.jpeg-643ec9-1633952231436-0)] WechatIMG224.jpeg