如何在React中使用腾讯地图？

最新推荐文章于 2024-08-07 10:25:36 发布

转载

最新推荐文章于 2024-08-07 10:25:36 发布 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cxyqts/p/11014393.html

文章标签：

#javascript #ViewUI

本文介绍了如何在React应用中使用腾讯地图API，通过antd组件库和qqmap插件实现在地图上点击获取经纬度，并将坐标显示在文本框中。详细步骤包括初始化地图、设置点击事件及位置搜索功能。

需求：在web网页中点击地图上面位置返回经纬度信息，基于react实现，然后点击之后显示在文本框中？

首先说一下，作者使用了antd组件库，qqmap插件，腾讯地图javascript开发，下面是地址

腾讯地图开发

qqmap插件

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         // 初始化经纬度，最开始的点
 9         let myLatlng = new