如何在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方式寫法，不過里面需要自己改一些方法，從中學習到很多

最后看展示效果圖，點擊地圖上位置顯示周期文本框中