PC端 React使用高德地图实现点击事件标记经纬度

2021-07-31 1,230 阅读1分钟

使用插件：react-amap
版本号：1.2.8

安装依赖npm install react-amap@1.2.8
使用的文件中引入

reactMap.js文件

import { Map, Marker } from 'react-amap'

使用

//构造函数声明position
constructor(props) {
  super(props)
  this.state = {
    position: {
      longitude: '',
      latitude: ''
    },
  }
}

//获取坐标存入position中
getLocalAddress = (lng, lat) => {
    this.setState({
        position: {
           longitude: lng,
           latitude: lat
        }
    })
}

render(){
  const {position} = this.state

  const events = {
    created: (ins) => { console.log(ins) },
    click: (e) => this.getLocalAddress(e.lnglat.lng, e.lnglat.lat)
  }

  return (
    <div style={{width: '100%', height: 500}}>
      <Map amapkey={'f1ef05bc86c26bf0690da7f7fdd7edd5'} events={events}>
        <Marker
          position={position ? position : null}
          clickable={true}
          draggable={true}
        />
      </Map>
    </div>
  )

4. 小结

以前没有接触过地图的功能用到这个插件怎么也实现不了点击地图上的坐标就能获取到经纬度并且标记上地图坐标后来逐渐看多了官方文档之后发现是自己将event事件用错了地方
在这里例子中之前用这个插件的时候自己将events事件放在了Marker组件标签这个组件里没有click事件后来发现应该是在Map组件标签上添加events事件

哈哈哈哈总算是实现出来了