如何在React中使用騰訊地圖？

需求：在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 qq.maps.LatLng(tarLat, tarLng); 10         // 設置地圖屬性
11         let myOptions = { 12             zoom: 16, 13  center: myLatlng, 14  mapTypeId: qq.maps.MapTypeId.ROADMAP, 15  }; 16         // 建立地圖，綁定dom
17         this.map = new qq.maps.Map( 18             document.getElementById('container'), 19  myOptions, 20  ); 21         // 現實已經存在的點
22         let markerlast = new qq.maps.Marker({ 23  position: myLatlng, 24             map: this.map, 25  }); 26         // 調用檢索
27         let latlngBounds = new qq.maps.LatLngBounds(); 28         // 調用Poi檢索類
29         let searchService = [];//調用百度地圖的搜索服務
30         let markers = [];//用戶搜索後顯示的點的集合
31         // 調用搜索服務
32         searchService = new qq.maps.SearchService({ 33             complete: results=> { 34                 let pois = results.detail.pois; 35                 for (let i = 0, l = pois.length; i < l; i++) { 36                     let poi = pois[i]; 37  latlngBounds.extend(poi.latLng); 38                     let marker = new qq.maps.Marker({ 39                         map: this.map, 40  position: poi.latLng, 41  }); 42                     marker.setTitle(i + 1); 43  markers.push(marker); 44  } 45                 this.map.fitBounds(latlngBounds); 46  }, 47  }); 48         // 將服務註冊到this中，方便搜索方法調用
49         this.searchService = searchService; 50         this.markers = markers; 51         // 鼠標點擊監聽
52  qq.maps.event.addListener( 53             this.map, 54             'click', 55             event=> { 56                 // 清除初始化位置
57                 markerlast.position = event.latLng; 58                 markerlast.setMap(null); 59                 // 獲取經緯度位置
60                 let lat = event.latLng.getLat(); 61                 let lng = event.latLng.getLng(); 62                 // 賦值至文本框內
63                 this.props.form.setFieldsValue({ lat: lat, lng: lng }); 64                 // 繪製點擊的點
65                 let marker = new qq.maps.Marker({ 66  position: event.latLng, 67                     map: this.map, 68  }); 69                 // 添加監聽事件 獲取鼠標單擊事件
70                 qq.maps.event.addListener(this.map, 'click', function(event) { 71                     marker.setMap(null); 72  }); 73                 // 清空上一次搜索結果
74                 Array.from(this.markers).forEach(marker=>{ 75                     marker.setMap(null); 76  }); 77  } 78  ); 79  }); 80 }

5.最後就是須要一個位置搜索功能

 1     //搜索
 2     searchKeyword = () => {  3         //獲取文本框輸入的值
 4         let keyword = document.getElementById('keyword').value;  5         let region = document.getElementById('region').value;  6         // 清空上一次搜索結果
 7         Array.from(this.markers).forEach(marker=>{  8             marker.setMap(null);  9  }); 10         //調用騰訊地圖的搜索功能
11         this.searchService.setLocation(region); 12         this.searchService.search(keyword); 13     }

其實沒有多複雜，就是調用一下騰訊地圖javascript開發api，而後將寫法兼容jsx方式寫法，不過裏面須要本身改一些方法，從中學習到不少

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