在React项目中使用mapbox，实现兄弟组件传递参数，显示鼠标移动地理坐标，并保留小数后两位

加载mapbox地图完之后，需要在头部工具栏中显示坐标，首先使用map.on方法调用

 map.on('mousemove', function (e) {

    });

‘mousemove’是鼠标移动触发事件，‘click’为点击事件，更多可在mapbox官网查询；

然后console一下；

 map.on('mousemove', function (e) {

      console.log(e)

    });

移动鼠标，控制台就会输出lnglat坐标信息,其中lng为经度，lat为纬度；

 

这时在mapbox组件中已经获取到坐标信息，需要传递给工具栏组件

安装event

npm install event -save

 

新建Evt.js文件，导入events

 

import {EventEmitter} from 'events';

export default new EventEmitter();   

 

发布者

mapbox组件

通过emit事件触发方法，发布订阅消息给订阅者。

传递参数的时候参数名‘aaa’一定要相同

import emitter from '../../stories/Evt.js';

export default class MapMapboxGl extends React.Component {

  constructor(props) {

    super(props)

}

map.on('mousemove', function (e) {

     emitter.emit('aaa', e.lngLat)

    });

 

}

订阅者

工具栏组件

import emitter from '../../stories/Evt.js';

 

定义两个初始状态lng,lat；

export default class AppToolbar extends React.Component {

  state = {

    lng: 0,

    lat: 0

  }

 

通过emitter.addListener(事件名称,函数名)方法，进行事件监听(订阅)。

参数名‘aaa’相同，在React中，变量只能在setState（）里修改

  componentDidMount() {

    emitter.addListener('aaa', (msg) => {

      this.setState({

        lng: msg.lng,

        lat: msg.lat,

      })

    })

  }

这时候已经拿到了数据只需要展示就好了

在render()的return值里渲染一下

  render() {

    return 

      <div class="lnglat">

         <IconText>坐标：{this.state.lng}，{this.state.lat}</IconText>

      </div>

这时候坐标就能显示出来了

 

 

 

如果要保留两位，在setState（）里添加.toFixed(2)

this.setState({

        lng: msg.lng.toFixed(2),

        lat: msg.lat.toFixed(2)

      })

这样就好了