标签：.. mousemove React msg 地理坐标 mapbox lat lng emitter

加载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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。