• pc版React重构,使用到了高德地图。搜了资料,发现有一个针对React进行封装的地图插件react-amap。官方网址:https://elemefe.github.io/react-amap/components/map,有兴趣的可以看下里面的API。 react-amap 安装 1...

    pc版React重构,使用到了高德地图。搜了资料,发现有一个针对React进行封装的地图插件react-amap。官方网址:https://elemefe.github.io/react-amap/components/map,有兴趣的可以看下里面的API。

    react-amap 安装

    1、使用npm进行安装,目前是1.2.8版本:

    cnpm i react-amap
    

    2、直接使用sdn方式引入

    <script src="https://unpkg.com/react-amap@0.2.5/dist/react-amap.min.js"></script>
    

    react-amap 使用

    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插件

    <Map  plugins={["ToolBar", 'Scale']}></Map>
    

    Marker 地图标记

    <Map>
    	<Marker position={['lng','lat']}></Marker>
    </Map>
    

    InfoWindow 窗体组件

    <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 事件实现更高级的使用需求,在高德原生实例创建成功后调用,参数就是创建的实例;获取到实例之后,就可以根据高德原生的方法对实例进行操作:

    const events = {
        created: (instance) => { console.log(instance.getZoom())},
        click: () => { console.log('You clicked map') }
    }
    <Map events={events}  />
    

    实现一个较为复杂地址搜索,地址标记、逆地理解析代码:

    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
    
    展开全文
  • 在项目有一个需要在地图上显示物体定位以及分布热力图的需求,导师选择使用高德地图进行实现。对应的package为React-amap。 记录一下在项目遇到的几个问题以及解决方案: 自定义Markers外观, // 标记杆塔的...

    在项目中有一个需要在地图上显示物体定位以及分布热力图的需求,导师选择使用高德地图进行实现。对应的package为React-amap。
    记录一下在项目中遇到的几个问题以及解决方案:

    1. 自定义Markers外观,
    // 标记杆塔的图片样式
      style = {
        position: 'relative',
        backgroundColor: 'white',
        color: '#fff',
        border: '0px solid #fff',
        background: `url(${circle})`,		// 通过import引入的本地图片
        // background: `url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/map-marker-icon.png')`,
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        width: '7px',
        height: '7px',
        top: '28px',
        left: '7.25px',
      };
    
      renderMarkerLayout = (extData) =>{
        return (
          <div>
            <Tooltip title={extData.parent + extData.index + '号杆塔' }>
              <div style={this.style}> </div>
            </Tooltip>
          </div>
        )
      };
    
    <Markers markers={}  render={ this.renderMarkerLayout } />
    
    1. 地图缩放到一定的比例之后显示细节信息,这个问题现在还没有解决。本来想的是给地图添加events当缩放的时候改变state使组件重新渲染,但是最终发现改变state之后地图并不会刷新,可能是地图的性能优化机制导致的吧???
    展开全文
  • React中的一些坑 今天做一个列表渲染,然后通过单击某一项,进入对应的详情页面。但是在使用map的时候,onClick无效并且出现了一些异常现象,话不多说,看图: 一开始我的li是这样写的: 并且,改变this指向,如图 ...

    React中的一些坑

    今天做一个列表渲染,然后通过单击某一项,进入对应的详情页面。但是在使用map的时候,onClick无效并且出现了一些异常现象,话不多说,看图:
    一开始我的li是这样写的:
    在这里插入图片描述
    并且,改变this指向,如图
    在这里插入图片描述
    然后,我在函数里打印了一下:
    在这里插入图片描述
    结果给我把数据像是用了map一样,直接映射了出来,但重点是我还没有点击,也就是还没触发这个函数。
    在这里插入图片描述
    解决办法:
    其实解决办法也很简单,这需要用到ES6的语法:“箭头函数”
    如图:
    在这里插入图片描述
    再打印一下,结果就OK了,如图:
    在这里插入图片描述
    疑问:
    我们知道,react中绑定事件的方式有三种,如图:
    在这里插入图片描述
    而上面的问题中,使用了bind改变this指向,但是结果却不能达到像使用了箭头函数一样,这是为什么呢?
    知道答案的小伙伴,可以告诉博主答案吗,如果您觉得这个问题太低端了,并且想骂博主的话,请您看看我的昵称,所以对一个小白还是键下留情吧,谢谢!

    展开全文
  • react中map遍历

    2019-09-17 19:20:54
    constructor(props) { super(props); this.state = { list:[ 'learn react', 'learn english' ] } } render() { //jsx语法 return ( <div> ...
      constructor(props) {
        super(props);
        this.state = {
          list:[
            'learn react',
            'learn english'
          ]
        }
      }
      render() {
        //jsx语法
        return (
          <div>
          <ul>
    {
      this.state.list.map((item,key) =>{
        return <li key={key}>{item}</li>
      })
    }
          </ul>
          </div>
        );
      }

     

    展开全文
  • react jsx中使用map

    2018-08-23 20:42:26
    function NumberList(props) { const numbers = props.numbers; return ( &lt;ul&... {numbers.map((number) =&gt; &lt;ListItem key={number.toString()} value={number}...
    function NumberList(props) {
      const numbers = props.numbers;
      return (
        <ul>
          {numbers.map((number) =>
            <ListItem key={number.toString()}
                      value={number} />
          )}
        </ul>
      );
    }
    展开全文
  • 需求: ...2)地图定位可任意点选位置,并将该位置的经纬度保存到该门店 结果: 只实现了第一条的需求 完成条件 环境: 使用react.js Ant.design的框架 ...2)在项目安装 react-amap 3)导包 import { Map, Ma...
  • 当前高德地图的react版本 饿了么的react-amap项目地址为:https://github.comElemeFE/react-amap 新的react-amap-next项目地址:https://github.com/windsome/react-amap-next ,采用新方案,极少代码 当前react版本...
  • 本篇文章主要介绍的是 在React工程 使用react-amap组件来写一个地图,地图上加一个点标记; 注意 :目前的本人发现在使用react-amap会对 umi 搭建的工程有所影响,建议使用原生高德api(document.ejs【可以看我的...
  • reactjs 里map使用

    2016-07-30 22:52:13
    react array map
  • react中使用百度地图 在react中使用百度地图有三种方式 1:首先使用window保存BMap 1): 在创建好的react项目中的public目录下的index.html中引入 <script type="text/javascript" src=...
  • React中 map() 方法的使用,以及 key 值的绑定。 1.这里以一个循环显示一个数组ToDoList的例子来展示。 import React, { Component } from 'react' export default class App extends Component { constructor...
  • react-amap填坑指南

    2018-06-14 14:53:34
    报错:XX is not a constructorreact-amap的版本得升级到 1.1.1及以上,支持加载 AMapUI 组件库1. react-amap版本卸载package.json里面"react-amap": "^1.2.7"2. amap版本根据react-amap文档...
  • map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arrayOfSquares = data.map(function (item) { return item * item; }...
  • React中render函数中变量map中事件无法关联的解决办法如下所示的代码,Input的checkbox可以正常显示3个,但是都无法和 handleChange关联上。 由于代码无法正常显示,我用图片 var Input = React...
  • react map遍历

    2017-10-17 14:50:39
    react map遍历记录一下项目制作过程中学到的一些方法,以便温习render(){ return ( { this.state.decoratedata.map(i =>
  • 使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下面加一个回复的input,input...
  • 需求 : react-native项目需要使用高德地图组件;有基本的轨迹以及marker功能; react-native-amap-geolocation react-native-smart-amap react-native-amap3d react-native-maps … 对比了一些,感觉比较全的还是...
  • React 中使用百度地图,高德地图出现'AMap' is not defined 'BMap' is not defined index.html &lt;script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=...
  • Bulid Web application use Google Maps 此文章根据Tutorialzine...自正式发布以来,一直都是热门话题就不多讨论了,官方教程可参考React中文社区或者加入由@题叶推广的React-China社区 React组件结构设计 App :...
1 2 3 4 5 ... 20
收藏数 30,094
精华内容 12,037