react项目web端引入高德地图

我正在参加「掘金·启航计划」

一 ，初始化，注册开发者账号

1，注册开发者账号，成为高德开放平台开发者

2，登陆之后，进入「应用管理」 页面「创建新应用」

3，为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」，设置域名白名单，可选（建议设置域名白名单）

4，添加成功后，可获取到key值和安全密钥jscode （ 自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)

二，在html文件中引入地图脚本

同步引入插件例如AMap.Geocoder（地理编码与逆地理编码服务，提供地址与坐标间的相互转换，

• 地理编码：将详细的结构化地址转换为高德经纬度坐标。且支持对地标性名胜景区、建筑物名称解析为高德经纬度坐标。
  结构化地址举例：北京市朝阳区阜通东大街6号转换后经纬度：116.480881,39.989410
  地标性建筑举例：天安门转换后经纬度：116.397499,39.908722
• 逆地理编码：将经纬度转换为详细结构化的地址，且返回附近周边的POI、AOI信息。
  例如：116.480881,39.989410 转换地址描述后：北京市朝阳区阜通东大街6号

），同步或异步引入插件见详情链接

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Geocoder"></script> 

三，在需要的页面进行地图的渲染

1，创建一个盒子容器存放地图，可自定义取名，我在这里取名mapContainer

<div id="mapContainer"></div>

2, 在css文件或者less/scss样式文件中设置容器的大小和层级

 #mapContainer {
    width: 100%; //参照外面父盒子的大小
    height: 100%;
    margin: 0px;
    z-index: 99; 
  }

3，页面初始化地图,地图更多详情请参考链接

class版本

• 1, 设置状态

constructor(props) {
    super(props)
    this.state = {
      map: null, //地图实例
      marker: null, //地图图标
      lng: '', //地图经度
      lat: '', //地图维度
      cityName: '',
      address: '',
    }
  }

• 2，componentDidMoun初始化数据

定义选择时的图标大小，外观，例如红框中的时点击时候获取坐标是的icon

map的一些属性和方法查看链接

componentDidMount() {
    // 创建一个地图，AMap挂载到了window对象上
    let map = new window.AMap.Map('mapContainer', {
      zoom: 11, //级别，PC上，zoom可设范围：[3,18]；移动端：zoom可设范围：[3,19]
      //center: [116.397428, 39.90923],//中心点坐标
      viewMode: '3D', //使用3D视图
    })
    // 构造地理编码 Geocoder
    let Geocoder = new window.AMap.Geocoder()
    // 地图控件：缩放工具条 ToolBar，异步加载插件
    map.plugin(['AMap.ToolBar'], function () {
      map.addControl(new window.AMap.ToolBar({ liteStyle: true }))
    })
     // 定义选择时的图标大小，外观
    let icon = new window.AMap.Icon({
      size: new window.AMap.Size(20, 30),
      imageSize: new window.AMap.Size(20, 30),
      image:
        'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    })
     // 创建地图标记
    let marker = new window.AMap.Marker({
      icon,
    })
    // 地图点击时触发
    map.on('click', (e) => {
      // 点击时将icon添加进具体的坐标
      map.add(marker)
      marker.setPosition(e.lnglat)
      // 地理编码获取经纬度
      Geocoder.getAddress(
        e.lnglat.lng + ',' + e.lnglat.lat,
        (status, result) => {
          if (status === 'complete' && result.regeocode) {
            let address = result.regeocode.formattedAddress
            // 将获取到的地址通过setState修改state状态
            this.setState({ address })
          } else {
            // 一般来说走到这里可能是脚本中key值出现问题
            message.error('高德根据经纬度查询地址失败')
          }
        }
      )
      // 将获取到的经纬度通过setState修改state状态
      this.setState({
        lng: e.lnglat.lng,
        lat: e.lnglat.lat,
      })
    })
    // 地图移动结束后触发
    map.on('moveend', (e) => {
      // 调用的接口，获取地图所在地区信息(逆地理)
      this.getCityNameByMapCenter(map)
    })

    this.getCityNameByMapCenter(map)

    this.setState({
      map, //设置地图实例
      marker, //设置地图图标
    })
  }

• 3，初始化或事件触发用到的方法

// 接口
import {MapApi} from './apis'
import { message } from 'antd'

//通过地图中心获取城市名称
  getCityNameByMapCenter = (map) => {
    let { lng, lat } = map.getCenter()
    // 请求的接口
    MapApi.getMapRegeoMsg({ location: lng + ',' + lat })
      .then((res) => {
        const {
          regeocode: {
            addressComponent: { city = '' },
          },
        } = res
        this.setState({
          cityName: city,
        })
      })
      .catch((error) => {
        message.error('高德地图获取当前城市失败 ' + error.info)
      })
  }

• 4，请求的接口，逆地理编码API服务地址，详情参考链接

import axios from 'axios' // axios方法自行封装

export const MapApi = {
  //获取地图所在地区信息(逆地理)
  getMapRegeoMsg: async (data)=> {
    // 逆地理编码API服务地址https://restapi.amap.com/v3/geocode/regeo
    let result = await axios('get', `https://restapi.amap.com/v3/geocode/regeo`,{key: '用户在高德地图官网申请Web服务API类型Key', ...data}  )
    return result
  }
  // 如果有其他需求请求接口也可以写在里面
}

• 5，页面卸载时销毁数据

componentWillUnmount() {
  this.state.map.destroy()
  this.state = null
}