react中使用amap

React中引入原生高德地图

引入
官网说的很简单，直接在index.html文件里引入一个

配置
webpack.config.js(如果是用dva框架的话，就找一下.webpackrc)

externals: {
‘AMap’: ‘AMap’
},

externals选项作用是–从打包的bundle文件中排除依赖。
让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script的方式去访问这些依赖。

调用
componentDidMount(){
let map = new window.AMap.Map(‘container’)
}
…

————————————————
上文为CSDN博主「南乡人」的原创文章，
原文链接：https://blog.csdn.net/qq_37086982/article/details/96882968

以下简单的使用原生amap 写一个react简单的通过搜索获取经纬度

import React, { Component } from 'react'
import styles from './index.less'
import { Input, message } from 'antd'


//props.getLngLat 定位信息

export default class index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      key: '6a3907f5d35694dc2ed65cdf62dc30ab',
    };

  }
  componentDidMount() {

    console.log(this.props, 1);

    const props = this.props

    const map = new window.AMap.Map("container", {
      resizeEnable: true,
      zoom: 13,
    });


    window.AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
      var autoOptions = {
        // 使用联想输入的input的id
        input: "tipinput"
      }
      var autocomplete = new window.AMap.Autocomplete(autoOptions)

      var placeSearch = new window.AMap.PlaceSearch({
        map: map
      })
      window.AMap.event.addListener(autocomplete, 'select', function (e) {
        //TODO 针对选中的poi实现自己的功能
        placeSearch.search(e.poi.name)
        // console.log(e,'搜索');
        if(!e.poi.location){
          message.info('选择地址不详细,请重新选择地址')
          return false
        }

        props.getLngLat(e)
      })
    })

  }

  render() {

    return (
      <div style={{ width: '100%', height: this.props.height }} >
        <Input id='tipinput' placeholder="请输入并选择地址" ></Input>

        <div id="container" className={styles.container}></div>

      </div >

    )
  }
}

如果要获取搜索后多个坐标的经纬度 使用事件

 window.AMap.event.addListener(placeSearch, "markerClick", function (e) {

        console.log(e);
   })

如果要鼠标点击地图任意点返回经纬度

var clickHandler = function (e) {

      alert('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！');
    };

    // 绑定事件
    map.on('click', clickHandler);