React 는 고 덕 지 도 를 사용 한 구현 예제(react-amap)

10589 단어 React고 덕 지도
pc 판 React 재 구성,고 덕 지도 에 사용.자 료 를 찾 아 보 니 React 를 위 한 지도 플러그 인 react-amap 가 있 었 습 니 다.공식 사이트:https://elemefe.github.io/react-amap/components/map관심 있 는 것 은 안에 있 는 API 를 볼 수 있 습 니 다.
react-map 설치
1.npm 를 사용 하여 설치 합 니 다.현재 1.2.8 버 전 입 니 다.

cnpm i react-amap
2.sdn 방식 으로 직접 도입

<script src="https://unpkg.com/[email protected]/dist/react-amap.min.js"></script>
react-map 사용

import React,{Component} from 'react'
import {Map,Marker} from 'react-amap'
const mapKey = '1234567809843asadasd' //             
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
이렇게 되면 간단 한 지 도 를 초기 화 할 수 있 습 니 다.
在这里插入图片描述
실제 개발 과정 에서 당신 은 비교적 복잡 한 사용 장면 이 있 을 것 이다.예 를 들 어 태그 점 이 필요 하고 지 도 를 크기 조정 하 며 현재 위치,위치 검색 등 기능 을 찾 을 수 있 습 니 다.수 요 는 대체적으로 다음 그림 과 같다.
在这里插入图片描述
그렇다면 플러그 인과 구성 요소 의 개념 을 도입 해 야 합 니 다.
도구 모음,스 케 일 플러그 인

<Map  plugins={["ToolBar", 'Scale']}></Map>
Marker 지도 표시

<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 이 벤트 를 통 해 더 높 은 사용 수 요 를 실현 합 니 다.고 덕 원생 인 스 턴 스 생 성 에 성공 한 후에 호출 합 니 다.매개 변 수 는 생 성 된 인 스 턴 스 입 니 다.인 스 턴 스 를 가 져 오 면 고 덕 원생 의 방법 에 따라 인 스 턴 스 를 조작 할 수 있 습 니 다.

const events = {
    created: (instance) => { console.log(instance.getZoom())},
    click: () => { console.log('You clicked map') }
}
<Map events={events}  />
비교적 복잡 한 주소 검색,주소 표시,역 지리 분석 코드 를 실현 합 니 다.

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
        }
    }

    //        (  )

    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, //         ,radius   ,             
                        extensions: "all"//                  ,  "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, //         ,radius   ,             
                        extensions: "all"//                  ,  "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="    "
                       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">    :
                        <span className="cor-dark mar-l-10">{signAddrList.addr}</span>
                    </div>
                </Modal>
            </div>
        )
    }
}

export default Address
React 가 고 덕 지 도 를 사용 하 는 실현 예제(react-amap)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 React 고 덕 지도 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!

좋은 웹페이지 즐겨찾기