高德地图(react_amap)之正逆地理位置
2021-10-10 本文已影响0人
林思念
实现功能:
- 地址栏输入,模糊匹配
- 地图添加
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