• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
李墨285 显示全部楼层 发表于 2021-10-26 13:13:10 |阅读模式 打印 上一主题 下一主题
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. import React,{Component} from 'react'
  2. import {Map,Marker} from 'react-amap'
  3. const mapKey = '1234567809843asadasd' //需要自己去高德官网上去申请
  4. class Address extends Component {
  5.         constructor (props) {
  6.         super (props)
  7.         this.state = {  
  8.         }
  9.     }
  10.         render(){
  11.                 return (
  12.                         <div style={{width: '100%', height: '400px'}}>
  13.                                 <Map amapkey={mapKey}
  14.                                      zoom={15}></Map>
  15.                         </div>
  16.                 )
  17.         }
  18. }
  19. export default Address
复制代码
这样的话,就会初始化一个简单的舆图。



实际开辟过程中,你会有比较复杂的利用场景。好比需要标志点、对舆图进行缩放、能够定位到当前位置、位置搜刮等等功能。需求大致如下图所示:



这样的话,那就需要引入插件以及组件的概念了。
ToolBar、Scale插件
  1. <Map  plugins={["ToolBar", 'Scale']}></Map>
复制代码
Marker 舆图标志
  1. <Map>
  2.         <Marker position={['lng','lat']}></Marker>
  3. </Map>
复制代码
InfoWindow 窗体组件
  1. <Map>
  2.         <InfoWindow
  3.             position={this.state.position}
  4.             visible={this.state.visible}
  5.             isCustom={false}
  6.             content={html}
  7.             size={this.state.size}
  8.             offset={this.state.offset}
  9.             events={this.windowEvents}
  10.           />
  11. </Map>
复制代码
通过 created 事故实现更高级的利用需求,在高德原生实例创建成功后调用,参数就是创建的实例;获取到实例之后,就可以根据高德原生的方法对实例进行操作:
  1. const events = {
  2.     created: (instance) => { console.log(instance.getZoom())},
  3.     click: () => { console.log('You clicked map') }
  4. }
  5. <Map events={events}  />
复制代码
实现一个较为复杂地址搜刮,地址标志、逆地明确析代码:
  1. import React , { Component } from 'react'
  2. import { Modal , Input } from 'antd'
  3. import styles from './index.scss'
  4. import classname from 'classnames'
  5. import { Map ,Marker,InfoWindow} from 'react-amap'
  6. import marker from 'SRC/statics/images/signin/marker2.png'
  7. const mapKey = '42c177c66c03437400aa9560dad5451e'
  8. class Address extends Component {
  9.     constructor (props) {
  10.         super(props)
  11.         this.state = {
  12.             signAddrList:{
  13.                 name:'',
  14.                 addr:'',
  15.                 longitude: 0,
  16.                 latitude: 0
  17.             },
  18.             geocoder:'',
  19.             searchContent:'',
  20.             isChose:false
  21.         }
  22.     }
  23.     //改变数据通用方法(单层)
  24.     changeData = (value, key) => {
  25.         let { signAddrList } = this.state
  26.         signAddrList[key] = value
  27.         this.setState({
  28.             signAddrList:signAddrList
  29.         })
  30.     }
  31.     placeSearch = (e) => {
  32.         this.setState({searchContent:e})
  33.     }
  34.     searchPlace = (e) => {
  35.         console.log(1234,e)
  36.     }
  37.     componentDidMount() {
  38.    
  39.     }
  40.     render() {
  41.         let { changeModal , saveAddressDetail } = this.props
  42.         let { signAddrList } = this.state
  43.         const selectAddress = {
  44.             created:(e) => {
  45.                 let auto
  46.                 let geocoder
  47.                 window.AMap.plugin('AMap.Autocomplete',() => {
  48.                     auto = new window.AMap.Autocomplete({input:'tipinput'});
  49.                 })
  50.                 window.AMap.plugin(["AMap.Geocoder"],function(){
  51.                     geocoder= new AMap.Geocoder({
  52.                         radius:1000, //以已知坐标为中心点,radius为半径,返回范围内兴趣点和道路信息
  53.                         extensions: "all"//返回地址描述以及附近兴趣点和道路信息,默认"base"
  54.                     });
  55.                 });
  56.                 window.AMap.plugin('AMap.PlaceSearch',() => {
  57.                     let place = new window.AMap.PlaceSearch({})
  58.                     let _this = this
  59.                     window.AMap.event.addListener(auto,"select",(e) => {
  60.                         place.search(e.poi.name)
  61.                         geocoder.getAddress(e.poi.location,function (status,result) {
  62.                             if (status === 'complete'&&result.regeocode) {
  63.                                 let address = result.regeocode.formattedAddress;
  64.                                 let data = result.regeocode.addressComponent
  65.                                 let name = data.township +data.street + data.streetNumber
  66.                                 _this.changeData(address,'addr')
  67.                                 _this.changeData(name,'name')
  68.                                 _this.changeData(e.poi.location.lng,'longitude')
  69.                                 _this.changeData(e.poi.location.lat,'latitude')
  70.                                 _this.setState({isChose:true})
  71.                             }
  72.                         })
  73.                     })
  74.                 })
  75.             },
  76.             click:(e) => {
  77.                 const _this = this
  78.                 var geocoder
  79.                 var infoWindow
  80.                 var lnglatXY=new AMap.LngLat(e.lnglat.lng,e.lnglat.lat);
  81.                 let content = '<div>定位中....</div>'
  82.                 window.AMap.plugin(["AMap.Geocoder"],function(){
  83.                     geocoder= new AMap.Geocoder({
  84.                         radius:1000, //以已知坐标为中心点,radius为半径,返回范围内兴趣点和道路信息
  85.                         extensions: "all"//返回地址描述以及附近兴趣点和道路信息,默认"base"
  86.                     });
  87.                     geocoder.getAddress(e.lnglat,function (status,result) {
  88.                         if (status === 'complete'&&result.regeocode) {
  89.                             let address = result.regeocode.formattedAddress;
  90.                             let data = result.regeocode.addressComponent
  91.                             let name = data.township +data.street + data.streetNumber
  92.                           
  93.                             _this.changeData(address,'addr')
  94.                             _this.changeData(name,'name')
  95.                             _this.changeData(e.lnglat.lng,'longitude')
  96.                             _this.changeData(e.lnglat.lat,'latitude')
  97.                             _this.setState({isChose:true})
  98.                         }
  99.                     })
  100.                 });
  101.                
  102.             }
  103.         }
  104.         return (
  105.             <div>
  106.                 <Modal visible={true}
  107.                        title="办公地点"
  108.                        centered={true}
  109.                        onCancel={() => changeModal('addressStatus',0)}
  110.                        onOk={() => saveAddressDetail(signAddrList)}
  111.                        width={700}>
  112.                     <div className={styles.serach}>
  113.                         <input id="tipinput"
  114.                                className={styles.searchContent}
  115.                                onChange={(e) => this.placeSearch(e.target.value)}
  116.                                onKeyDown={(e) => this.searchPlace(e)} />
  117.                         <i className={classname(styles.serachIcon,"iconfont icon-weibiaoti106")}></i>
  118.                     </div>
  119.                     <div className={styles.mapContainer} id="content" >
  120.                         {
  121.                             this.state.isChose ? <Map amapkey={mapKey}
  122.                                                       plugins={["ToolBar", 'Scale']}
  123.                                                       events={selectAddress}
  124.                                                       center={ [ signAddrList.longitude,signAddrList.latitude] }
  125.                                                       zoom={15}>
  126.                                 <Marker position={[ signAddrList.longitude,signAddrList.latitude]}/>
  127.                             </Map> : <Map amapkey={mapKey}
  128.                                           plugins={["ToolBar", 'Scale']}
  129.                                           events={selectAddress}
  130.                                           zoom={15}>
  131.                                 <Marker position={[ signAddrList.longitude,signAddrList.latitude]}/>
  132.                             </Map>
  133.                         }
  134.                     </div>
  135.                     <div className="mar-t-20">详细地址:
  136.                         <span className="cor-dark mar-l-10">{signAddrList.addr}</span>
  137.                     </div>
  138.                 </Modal>
  139.             </div>
  140.         )
  141.     }
  142. }
  143. export default Address
复制代码
到此这篇关于React利用高德舆图的实现示例(react-amap)的文章就介绍到这了,更多相关React 高德舆图内容请搜刮草根技术分享从前的文章或继承欣赏下面的相关文章盼望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作