在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组件中已经获取到坐标信息，需要传递给工具栏组件

npm install event -save

安装event

新建Evt.js文件，导入events

import {EventEmitter} from 'events';
export default new EventEmitter();

发布者

通过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)
      })

 这样就好了

标签：..,mousemove,React,msg,地理坐标,mapbox,lat,lng,emitter
来源： https://blog.csdn.net/m0_46478007/article/details/120846860