React使用高德地圖的實(shí)現(xiàn)示例(react-amap)

更新時(shí)間：2021年04月18日 11:50:34 作者：yzbyxmx

這篇文章主要介紹了React使用高德地圖的實(shí)現(xiàn)示例(react-amap)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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ā)過(guò)程中，你會(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>

通過(guò) 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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: