React使用高德地圖的實(shí)現(xiàn)示例(react-amap)
更新時(shí)間：2021年04月18日 11:50:34 作者：yzbyxmx
這篇文章主要介紹了React使用高德地圖的實(shí)現(xiàn)示例(react-amap)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
pc版React重構(gòu)，使用到了高德地圖。搜了資料，發(fā)現(xiàn)有一個(gè)針對(duì)React進(jìn)行封裝的地圖插件react-amap。官方網(wǎng)址：https://elemefe.github.io/react-amap/components/map，有興趣的可以看下里面的API。
react-amap 安裝
1、使用npm進(jìn)行安裝，目前是1.2.8版本：
cnpm i react-amap
2、直接使用sdn方式引入
<script src="https://unpkg.com/react-amap@0.2.5/dist/react-amap.min.js"></script>
react-amap 使用
import React,{Component} from 'react'
import {Map,Marker} from 'react-amap'
const mapKey = '1234567809843asadasd' //需要自己去高德官網(wǎng)上去申請(qǐng)
class Address extends Component {
constructor (props) {
super (props)
this.state = {
}
}
render(){
return (
<div style={{width: '100%', height: '400px'}}>
<Map amapkey={mapKey}
zoom={15}></Map>
</div>
)
}
}
export default Address
這樣的話，就會(huì)初始化一個(gè)簡(jiǎn)單的地圖。
實(shí)際開發(fā)過程中，你會(huì)有比較復(fù)雜的使用場(chǎng)景。比如需要標(biāo)記點(diǎn)、對(duì)地圖進(jìn)行縮放、能夠定位到當(dāng)前位置、位置搜索等等功能。需求大致如下圖所示：
這樣的話，那就需要引入插件以及組件的概念了。
ToolBar、Scale插件
<Map plugins={["ToolBar", 'Scale']}></Map>
Marker 地圖標(biāo)記
<Map>
<Marker position={['lng','lat']}></Marker>
</Map>
InfoWindow 窗體組件
<Map>
<InfoWindow
position={this.state.position}
visible={this.state.visible}
isCustom={false}
content={html}
size={this.state.size}
offset={this.state.offset}
events={this.windowEvents}
/>
</Map>
通過 created 事件實(shí)現(xiàn)更高級(jí)的使用需求，在高德原生實(shí)例創(chuàng)建成功后調(diào)用，參數(shù)就是創(chuàng)建的實(shí)例；獲取到實(shí)例之后，就可以根據(jù)高德原生的方法對(duì)實(shí)例進(jìn)行操作：
const events = {
created: (instance) => { console.log(instance.getZoom())},
click: () => { console.log('You clicked map') }
}
<Map events={events} />
實(shí)現(xiàn)一個(gè)較為復(fù)雜地址搜索，地址標(biāo)記、逆地理解析代碼：
import React , { Component } from 'react'
import { Modal , Input } from 'antd'
import styles from './index.scss'
import classname from 'classnames'
import { Map ,Marker,InfoWindow} from 'react-amap'
import marker from 'SRC/statics/images/signin/marker2.png'
const mapKey = '42c177c66c03437400aa9560dad5451e'
class Address extends Component {
constructor (props) {
super(props)
this.state = {
signAddrList:{
name:'',
addr:'',
longitude: 0,
latitude: 0
},
geocoder:'',
searchContent:'',
isChose:false
}
}
//改變數(shù)據(jù)通用方法(單層)
changeData = (value, key) => {
let { signAddrList } = this.state
signAddrList[key] = value
this.setState({
signAddrList:signAddrList
})
}
placeSearch = (e) => {
this.setState({searchContent:e})
}
searchPlace = (e) => {
console.log(1234,e)
}
componentDidMount() {
}
render() {
let { changeModal , saveAddressDetail } = this.props
let { signAddrList } = this.state
const selectAddress = {
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 AMap.Geocoder({
radius:1000, //以已知坐標(biāo)為中心點(diǎn)，radius為半徑，返回范圍內(nèi)興趣點(diǎn)和道路信息
extensions: "all"http://返回地址描述以及附近興趣點(diǎn)和道路信息，默認(rèn)"base"
});
});
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) {
let address = result.regeocode.formattedAddress;
let data = result.regeocode.addressComponent
let name = data.township +data.street + data.streetNumber
_this.changeData(address,'addr')
_this.changeData(name,'name')
_this.changeData(e.poi.location.lng,'longitude')
_this.changeData(e.poi.location.lat,'latitude')
_this.setState({isChose:true})
}
})
})
})
},
click:(e) => {
const _this = this
var geocoder
var infoWindow
var lnglatXY=new AMap.LngLat(e.lnglat.lng,e.lnglat.lat);
let content = '<div>定位中....</div>'
window.AMap.plugin(["AMap.Geocoder"],function(){
geocoder= new AMap.Geocoder({
radius:1000, //以已知坐標(biāo)為中心點(diǎn)，radius為半徑，返回范圍內(nèi)興趣點(diǎn)和道路信息
extensions: "all"http://返回地址描述以及附近興趣點(diǎn)和道路信息，默認(rèn)"base"
});
geocoder.getAddress(e.lnglat,function (status,result) {
if (status === 'complete'&&result.regeocode) {
let address = result.regeocode.formattedAddress;
let data = result.regeocode.addressComponent
let name = data.township +data.street + data.streetNumber
_this.changeData(address,'addr')
_this.changeData(name,'name')
_this.changeData(e.lnglat.lng,'longitude')
_this.changeData(e.lnglat.lat,'latitude')
_this.setState({isChose:true})
}
})
});
}
}
return (
<div>
<Modal visible={true}
title="辦公地點(diǎn)"
centered={true}
onCancel={() => changeModal('addressStatus',0)}
onOk={() => saveAddressDetail(signAddrList)}
width={700}>
<div className={styles.serach}>
<input id="tipinput"
className={styles.searchContent}
onChange={(e) => this.placeSearch(e.target.value)}
onKeyDown={(e) => this.searchPlace(e)} />
<i className={classname(styles.serachIcon,"iconfont icon-weibiaoti106")}></i>
</div>
<div className={styles.mapContainer} id="content" >
{
this.state.isChose ? <Map amapkey={mapKey}
plugins={["ToolBar", 'Scale']}
events={selectAddress}
center={ [ signAddrList.longitude,signAddrList.latitude] }
zoom={15}>
<Marker position={[ signAddrList.longitude,signAddrList.latitude]}/>
</Map> : <Map amapkey={mapKey}
plugins={["ToolBar", 'Scale']}
events={selectAddress}
zoom={15}>
<Marker position={[ signAddrList.longitude,signAddrList.latitude]}/>
</Map>
}
</div>
<div className="mar-t-20">詳細(xì)地址:
<span className="cor-dark mar-l-10">{signAddrList.addr}</span>
</div>
</Modal>
</div>
)
}
}
export default Address
到此這篇關(guān)于React使用高德地圖的實(shí)現(xiàn)示例(react-amap)的文章就介紹到這了,更多相關(guān)React 高德地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
記錄React使用connect后,ref.current為null問題及解決
記錄React使用connect后,ref.current為null問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
react學(xué)習(xí)每天一個(gè)hooks?useWhyDidYouUpdate
這篇文章主要為大家介紹了react學(xué)習(xí)每天一個(gè)hooks?useWhyDidYouUpdate使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要給大家介紹了React優(yōu)雅的捕獲并處理渲染異常方式,文章通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了React通過classnames庫(kù)添加類,在vue中添加class是一件非常簡(jiǎn)單的事情，你可以通過傳入一個(gè)對(duì)象, 通過布爾值決定是否添加類，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了react-router-dom5如何升級(jí)到6問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React?Context源碼實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了React?Context源碼實(shí)現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在React中,我們經(jīng)常在子組件中調(diào)用父組件的方法,一般用props回調(diào)即可,這篇文章主要介紹了React父組件如何調(diào)用子組件的方法推薦,需要的朋友可以參考下2023-11-11
React 作為當(dāng)下最為流行的前端開發(fā)框架之一，使用它可以快速構(gòu)建大型 Web 應(yīng)用，加上其出色的性能表現(xiàn)，使得眾多互聯(lián)網(wǎng)公司對(duì)它格外地青睞，這篇文章主要介紹了React運(yùn)行機(jī)制2022-11-11
React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解
這篇文章主要為大家介紹了React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了在react中使用vuex的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07