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

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

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

腾讯地图开发 

qqmap插件

1.应用到的插件qqmap，npm自行下载，

import QQMap from 'qqmap';

2.首先准备一个div作为map绑定的标签：

<div>
　　<Input id="keyword" style={{ width: '150px' }} defaultValue={'乐高'} placeholder="地址"/>
　　<Input id="region" style={{ width: '150px' }} defaultValue={'北京'} placeholder="城市"/>
　　<Button onClick={this.searchKeyword}>搜索</Button>
</div>
<div id="container" style={{height: 400, width: 600}}></div>

3.由于react生命周期的原因只能在comonentDidMount()中初始化腾讯地图map

componentDidMount() {
    this.initQQMap();
}

4.然后在initQQMap()方法里面实现了地图的初始化、设置中心点、点击事件获取经纬度，然后显示点击处的覆盖物，最后显示到文本框中

//地图初始化的方法
initQQMap = () => {
    //设置中心坐标
    let tarLat = 39.90736606309809;
    let tarLng = 116.39774322509766;
    //初始化地图
    QQMap.init('your_key//换成自己的', ()=>{
        // 初始化经纬度，最开始的点
        let myLatlng = new qq.maps.LatLng(tarLat, tarLng);
        // 设置地图属性
        let myOptions = {
            zoom: 16,
            center: myLatlng,
            mapTypeId: qq.maps.MapTypeId.ROADMAP,
        };
        // 创建地图，绑定dom
        this.map = new qq.maps.Map(
            document.getElementById('container'),
            myOptions,
        );
        // 现实已经存在的点
        let markerlast = new qq.maps.Marker({
            position: myLatlng,
            map: this.map,
        });
        // 调用检索
        let latlngBounds = new qq.maps.LatLngBounds();
        // 调用Poi检索类
        let searchService = [];//调用百度地图的搜索服务
        let markers = [];//用户搜索后显示的点的集合
        // 调用搜索服务
        searchService = new qq.maps.SearchService({
            complete: results=> {
                let pois = results.detail.pois;
                for (let i = 0, l = pois.length; i < l; i++) {
                    let poi = pois[i];
                    latlngBounds.extend(poi.latLng);
                    let marker = new qq.maps.Marker({
                        map: this.map,
                        position: poi.latLng,
                    });
                    marker.setTitle(i + 1);
                    markers.push(marker);
                }
                this.map.fitBounds(latlngBounds);
            },
        });
        // 将服务注册到this中，方便搜索方法调用
        this.searchService = searchService;
        this.markers = markers;
        // 鼠标点击监听
        qq.maps.event.addListener(
            this.map,
            'click',
            event=> {
                // 清除初始化位置
                markerlast.position = event.latLng;
                markerlast.setMap(null);
                // 获取经纬度位置
                let lat = event.latLng.getLat();
                let lng = event.latLng.getLng();
                // 赋值至文本框内
                this.props.form.setFieldsValue({ lat: lat, lng: lng });
                // 绘制点击的点
                let marker = new qq.maps.Marker({
                    position: event.latLng,
                    map: this.map,
                });
                // 添加监听事件   获取鼠标单击事件
                qq.maps.event.addListener(this.map, 'click', function(event) {
                    marker.setMap(null);
                });
                // 清空上一次搜索结果
                Array.from(this.markers).forEach(marker=>{
                    marker.setMap(null);
                });
            }
        );
    });
}

5.最后就是需要一个位置搜索功能

    //搜索
    searchKeyword = () => {
        //获取文本框输入的值
        let keyword = document.getElementById('keyword').value;
        let region = document.getElementById('region').value;
        // 清空上一次搜索结果
        Array.from(this.markers).forEach(marker=>{
            marker.setMap(null);
        });
        //调用腾讯地图的搜索功能
        this.searchService.setLocation(region);
        this.searchService.search(keyword);
    }

其实没有多复杂，就是调用一下腾讯地图javascript开发api，然后将写法兼容jsx方式写法，不过里面需要自己改一些方法，从中学习到很多

最后看展示效果图，点击地图上位置显示周期文本框中