服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - React - React使用高德地图的实现示例(react-amap)

React使用高德地图的实现示例(react-amap)

2022-03-05 20:50yzbyxmx React

这篇文章主要介绍了React使用高德地图的实现示例(react-amap)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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
<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' //需要自己去高德官网上去申请
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

这样的话，就会初始化一个简单的地图。

React使用高德地图的实现示例(react-amap)

实际开发过程中，你会有比较复杂的使用场景。比如需要标记点、对地图进行缩放、能够定位到当前位置、位置搜索等等功能。需求大致如下图所示：

React使用高德地图的实现示例(react-amap)

这样的话，那就需要引入插件以及组件的概念了。
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

  • React
  • 高德地图

    • 延伸 · 阅读

    精彩推荐
    • ReactReact实现todolist功能

      React实现todolist功能

      这篇文章主要介绍了React实现todolist功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...

      一杯清泉7082021-12-21
    • ReactReact antd tabs切换造成子组件重复刷新

      React antd tabs切换造成子组件重复刷新

      这篇文章主要介绍了React antd tabs切换造成子组件重复刷新,需要的朋友可以参考下...

      一堆乱码4742022-02-22
    • React如何编写高性能的 React 代码：规则、模式、注意事项

      如何编写高性能的 React 代码：规则、模式、注意事项

      本文将通过逐步实现一个简单的应用来带大家看看如何编写编写高性能的 React 代码。...

      前端充电宝9682022-02-24
    • React详解React中key的作用

      详解React中key的作用

      这篇文章主要介绍了React中key的作用，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下...

      夏花未眠4462022-02-28
    • ReactReact中使用Vditor自定义图片详解

      React中使用Vditor自定义图片详解

      这篇文章主要介绍了React中使用Vditor自定义图片详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们...

      浅夏晴空10042021-12-20
    • Reactreact中常见hook的使用方式

      react中常见hook的使用方式

      这篇文章主要介绍了react中常见hook的使用方式与区别，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下...

      一颗冰淇淋8902022-02-25
    • ReactReact 三大属性之state的使用详解

      React 三大属性之state的使用详解

      这篇文章主要介绍了React 三大属性之state的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下...

      xiaoznz3702022-03-02
    • React浅谈react路由传参的几种方式

      浅谈react路由传参的几种方式

      这篇文章主要介绍了浅谈react路由传参的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下...

      glorydx4622022-02-20
    最近更新
    编辑推荐
    阅读排行
    热门标签
    Vditor 　 useMemo 　 useCallback 　 不可变值 　 错误边界 　 eject 　 create-react-app 　 useRef 　 Form组件 　 搭建工程 　 emotion 　 EffectList 　 Threejs 　 todolist 　 文档编写 　 ReactRouter 　 共享组件 　 代码分割 　 setState 　 PReact 　 zarm 　 cloneElement 　 ErrorBoundary 　
    © 2019-2022 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图