加载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)
})
这样就好了