pc版React重構，使用到了高德地圖。搜了資料，發現有一個針對React進行封裝的地圖插件react-amap。官方網址：https://elemefe.github.io/react-amap/components/map，有興趣的可以看下里面的API。
react-amap 安裝
1、使用npm進行安裝，目前是1.2.8版本：
|
1
|
cnpm i react-amap |
2、直接使用sdn方式引入
|
1
|
|
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' //需要自己去高德官網上去申請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 |
這樣的話，就會初始化一個簡單的地圖。
實際開發過程中，你會有比較復雜的使用場景。比如需要標記點、對地圖進行縮放、能夠定位到當前位置、位置搜索等等功能。需求大致如下圖所示：
這樣的話，那就需要引入插件以及組件的概念了。
ToolBar、Scale插件
|
1
|
<Map plugins={["ToolBar", 'Scale']}></Map> |
Marker 地圖標記
|
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 事件實現更高級的使用需求，在高德原生實例創建成功后調用，參數就是創建的實例；獲取到實例之后，就可以根據高德原生的方法對實例進行操作：
|
1
2
3
4
5
|
const events = { created: (instance) => { console.log(instance.getZoom())}, click: () => { console.log('You clicked map') }}<Map events={events} /> |
實現一個較為復雜地址搜索，地址標記、逆地理解析代碼：
|
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 } } //改變數據通用方法(單層) 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 高德地圖內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/u013262823/article/details/92795965
