最近遇到一個需求，h5頁面用戶新增地址的時候除了可以調起級聯菜單彈窗進行選擇也可以點擊圖標進入地圖進行選擇，如下圖：

我們用的是騰訊地圖，要使用騰訊地圖功能首先要組冊key完成驗證，這個按照文檔一步一步來就可以了，完成之后需要進行一些設置，就我這個選點組件而言就必須開啟?WebServiceAPI，否則無法使用相應的地圖功能。

騰訊地圖選點組件，用起來還是挺方便的，使用方式有兩種：一種是使用iframe內嵌調用；還有一種是通過<a>標簽直接跳轉一個新的地圖頁面。iframe嵌入不是很好用，于是選了第二種。通過頁面跳轉的方式調用該組件的時候，需要設置backurl參數，用戶點擊選中的位置點后，頁面跳轉至開發者指定的返回地址（backurl），并將位置信息添加到回跳地址（backurl）上，具體使用可查看文檔。我是使用vue框架開發的，具體實現代碼如下：
?

//1.<tempalte>中 <a :href="href" @click="toSelectAddress"> <img src="@/assets/images/address/ic_address_location.png" class="location-icon"></a>//<script>中 //2.在data中定義一個值用來存放跳轉的href值 href: 'http://apis.map.qq.com/tools/locpicker?search=1&type=0&key=yourkey&referer=myapp'//3.點擊事件處理 主要是獲取當前頁面的url 作為backUrl值然后拼接到href上 toSelectAddress() {let href = window.location.href;let urlArr = href.split('?');this.href = this.href + `&backurl=${urlArr[0]}` }//4.進入地圖頁面顯示是你當前地址附近，你也可以搜索，匹配的地址會顯示在頁面下方列表中， //點擊地址就可以回到backurl所指的頁面，此時地址相關值會拼接到backurl上//5.解析攜帶地址信息的URL，獲取信息，我是通過處理把地址信息轉化成對象方便使用 //處理URL let handleUrl = function(url) {let decodedUrl = decodeURI(url);let query = decodedUrl.split('?')[1];let queryObj = {};if (query) {let queryArr = query.split('&');queryArr.forEach(item=> {let itemArr = item.split('=');queryObj[itemArr[0]] = itemArr[1];})}console.log('處理url', queryObj)return queryObj; }//到這里你已經獲取到了用戶經緯度 所選地址 所在城市等信息 如果你想獲取更詳細的信息 比如省、市、區、街道等等 可以通過騰訊地圖逆地址解析來獲取。 騰訊地圖這個接口是跨域的，可以前端處理也可以讓后端處理再返回數據，我是使用jquery通過JSONP的方式處理，代碼如下 //逆解析騰訊地圖獲取到的地址 location參數是獲取到的經緯度parseAddress(location) {let data = {　　　　　key: "yourkey",get_poi: '1',location,output: 'jsonp'　　}var url = `https://apis.map.qq.com/ws/geocoder/v1/`;let that = this;$.ajax({type: "get",dataType: 'jsonp',jsonp: "callback",jsonpCallback: "parseAddressSucc",url: url,data: data,success: function(res) {console.log('成功')const { address_component } = res.result;//復制一份數據const copyAddress = JSON.parse(JSON.stringify(that.address));copyAddress.province = address_component.province;copyAddress.city = address_component.city;copyAddress.area = address_component.district;copyAddress.address_details = address_component.street + address_component.street_number;that.areas = [address_component.province, address_component.city , address_component.district];that.info = copyAddress;//業務處理console.log(res, '跨域數據')},error: function(err) {//業務處理console.log(err, '出錯')}});

2.在一個后臺管理項目也需要用到選點組件的功能，這時使用頁面跳轉的方式就不太合適了，于是選擇iframe方式調用，src中的coord參數是設置地圖的中心點，在這個點會顯示一個marker。

<iframeid="myMap"width="100%"height="400px"frameborder=0:src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=yourkey&referer=myapp&coord=${latLng}`"></iframe>window.addEventListener("message",function(event) {// 接收位置信息，用戶選擇確認位置點后選點組件會觸發該事件，回傳用戶的位置信息var loc = event.data;if (loc && loc.module == "locationPicker") {//防止其他應用也會向該頁面post信息，需判斷module是否為'locationPicker'//獲取了用戶選擇的地址信息}},false);

總結

以上是生活随笔為你收集整理的腾讯地图踩坑记之选点组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。