需求:在web网页中点击地图上面位置返回经纬度信息,基于react实现,然后点击之后显示在文本框中?
首先说一下,作者使用了antd组件库,qqmap插件,腾讯地图javascript开发,下面是地址
1.应用到的插件qqmap,npm自行下载,
1 import QQMap from 'qqmap';
2.首先准备一个div作为map绑定的标签:
1 <div> 2 <Input id="keyword" style={ { width: '150px' }} defaultValue={'乐高'} placeholder="地址"/> 3 <Input id="region" style={ { width: '150px' }} defaultValue={'北京'} placeholder="城市"/> 4 <Button onClick={ this.searchKeyword}>搜索</Button> 5 </div> 6 <div id="container" style={ {height: 400, width: 600}}></div>
3.由于react生命周期的原因只能在comonentDidMount()中初始化腾讯地图map
1 componentDidMount() { 2 this.initQQMap(); 3 }
4.然后在initQQMap()方法里面实现了地图的初始化、设置中心点、点击事件获取经纬度,然后显示点击处的覆盖物,最后显示到文本框中
1 //地图初始化的方法 2 initQQMap = () => { 3 //设置中心坐标 4 let tarLat = 39.90736606309809; 5 let tarLng = 116.39774322509766; 6 //初始化地图 7 QQMap.init('your_key//换成自己的', ()=>{ 8 //