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

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
  • 高德地图

    • 延伸 · 阅读

    精彩推荐
    • React详解React Fiber的工作原理

      详解React Fiber的工作原理

      这篇文章主要介绍了React Fiber的工作原理的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下...

      陌上兮月7942022-03-08
    • ReactReact tsx生成随机验证码

      React tsx生成随机验证码

      这篇文章主要为大家详细介绍了React tsx生成随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      laipengfei196252022-03-09
    • Reactreact获取input输入框的值的方法示例

      react获取input输入框的值的方法示例

      这篇文章主要介绍了react获取input输入框的值的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友...

      Pinkh8222022-02-24
    • React深入理解React Native核心原理(React Native的桥接（Bridge)

      深入理解React Native核心原理(React Native的桥接（Bridge)

      这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接（Bridge),本文重点给大家介绍React Native的基础知识及实现原理，需要的朋友可以参考下...

      Gavell9712022-02-23
    • ReactReact html中使用react的两种方式

      React html中使用react的两种方式

      这篇文章主要介绍了React html中使用react的两种方式,本文给大家提到了React pwa的配置代码，给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴...

      愚公搬代码6422022-02-23
    • Reactreact diff算法源码解析

      react diff算法源码解析

      这篇文章主要介绍了react diff算法源码解析的相关资料，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下...

      zhangyu5632022-02-27
    • Reactreact如何用懒加载减少首屏加载时间

      react如何用懒加载减少首屏加载时间

      这篇文章主要介绍了react如何利用懒加载减少首屏加载时间，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下...

      阿政想暴富7412022-03-03
    • Reactreact-native 实现购物车滑动删除效果的示例代码

      react-native 实现购物车滑动删除效果的示例代码

      这篇文章主要介绍了react-native 实现购物车滑动删除效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，...

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