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版本：
|
1
|
cnpm i react-amap |
2、直接使用sdn方式引入
|
1
|
<script src="https://unpkg.com/react-amap@0.2.5/dist/react-amap.min.js"></script> |
react-amap 使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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è)簡單的地圖。
實(shí)際開發(fā)過程中，你會(huì)有比較復(fù)雜的使用場景。比如需要標(biāo)記點(diǎn)、對(duì)地圖進(jìn)行縮放、能夠定位到當(dāng)前位置、位置搜索等等功能。需求大致如下圖所示：
這樣的話，那就需要引入插件以及組件的概念了。
ToolBar、Scale插件
|
1
|
<Map plugins={["ToolBar", 'Scale']}></Map> |
Marker 地圖標(biāo)記
|
1
2
3
|
<Map> <Marker position={['lng','lat']}></Marker></Map> |
InfoWindow 窗體組件
|
1
2
3
4
5
6
7
8
9
10
11
|
<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)行操作：
|
1
2
3
4
5
|
const events = { created: (instance) => { console.log(instance.getZoom())}, click: () => { console.log('You clicked map') }}<Map events={events} /> |
實(shí)現(xiàn)一個(gè)較為復(fù)雜地址搜索，地址標(biāo)記、逆地理解析代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
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"//返回地址描述以及附近興趣點(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"//返回地址描述以及附近興趣點(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)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/u013262823/article/details/92795965
