目前騰訊位置服務(wù)提供路線規(guī)劃、地圖選點(diǎn)、地鐵圖、城市選擇器插件四款插件產(chǎn)品

在微信公眾平臺(tái) 選擇開發(fā)工具可開啟騰訊位置服務(wù)

之后便可以在 設(shè)置--第三方設(shè)置中添加自己所需要的騰訊地圖插件

因?yàn)槲易龅男〕绦蛑行枰玫降貓D選點(diǎn)功能 但是在安裝地圖選點(diǎn)插件時(shí) 會(huì)出現(xiàn)小程序類目不符合或主體類目不符合的情況導(dǎo)致安裝插件失敗

在微信開放社區(qū)搜索這一插件后得知 目前個(gè)人小程序不支持開通這一插件 需要進(jìn)行企業(yè)認(rèn)證添加

而我的小程序需要用到獲取定位且逆地址解析功能 因此我選擇去查找其他第三方開源地圖api

以下給出兩種第三方地圖開放平臺(tái)地址

高德：https://lbs.amap.com/api/wx/summary/

百度：http://lbsyun.baidu.com/index.php?title=wxjsapi

由于個(gè)人喜好問題 我參考的是百度地圖微信小程序JavaScript API

接下來就是按照官方文檔上的提示來進(jìn)行api的調(diào)用

首先是要注冊(cè)百度賬號(hào)，成為個(gè)人百度地圖開發(fā)者 之后創(chuàng)建應(yīng)用 獲取ak

之后配置環(huán)境 引入js 以及在微信公眾平臺(tái) 配置項(xiàng)目的合法request域名

接下來就可以在自己的微信小程序里 使用到百度地圖為小程序提供的POI查詢、模糊查詢、地址轉(zhuǎn)換和天氣查詢功能

這里就列出在實(shí)現(xiàn)逆地址解析時(shí)所需的代碼

1. 打開快速創(chuàng)建的微信小程序 pages/index/index.js 文件，用下面的代碼完全替換原代碼

// 引用百度地圖微信小程序JSAPI模塊 
var bmap = require('../../libs/bmap-wx.js'); 
var wxMarkerData = []; 
Page({ 
    data: { 
        markers: [], 
        latitude: '', 
        longitude: '', 
        rgcData: {} 
    }, 
    makertap: function(e) { 
        var that = this; 
        var id = e.markerId; 
        that.showSearchInfo(wxMarkerData, id); 
    }, 
    onLoad: function() { 
        var that = this; 
        // 新建百度地圖對(duì)象 
        var BMap = new bmap.BMapWX({ 
            ak: '您的ak' 
        }); 
        var fail = function(data) { 
            console.log(data) 
        }; 
        var success = function(data) { 
            wxMarkerData = data.wxMarkerData; 
            that.setData({ 
                markers: wxMarkerData 
            }); 
            that.setData({ 
                latitude: wxMarkerData[0].latitude 
            }); 
            that.setData({ 
                longitude: wxMarkerData[0].longitude 
            }); 
        } 
        // 發(fā)起regeocoding檢索請(qǐng)求 
        BMap.regeocoding({ 
            fail: fail, 
            success: success, 
            iconPath: '../../img/marker_red.png', 
            iconTapPath: '../../img/marker_red.png' 
        }); 
    }, 
    showSearchInfo: function(data, i) { 
        var that = this; 
        that.setData({ 
            rgcData: { 
                address: '地址：' + data[i].address + '\n', 
                desc: '描述：' + data[i].desc + '\n', 
                business: '商圈：' + data[i].business 
            } 
        }); 
    } 
  
})

2. 為能夠正常展示地圖和檢索結(jié)果，打開 pages/index/index.wxml 文件，用下面的代碼完全替換原代碼

<view class="map_container"> 
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
</view> 
<view class="rgc_info"> 
  <text>{{rgcData.address}}</text> 
  <text>{{rgcData.desc}}</text> 
  <text>{{rgcData.business}}</text> 
</view>

3. 拷貝樣式代碼到 pages/index/index.wxss文件

.map_container{ 
    height: 300px; 
    width: 100%; 
} 
  
.map { 
    height: 100%; 
    width: 100%; 
}

4. 最后保存修改，即可看到示例效果

本示例在頁(yè)面加載完成后對(duì)當(dāng)前定位點(diǎn)進(jìn)行了逆地址解析，點(diǎn)擊marker可以看到當(dāng)前地點(diǎn)的相關(guān)位置描述信息。

在把代碼復(fù)制完后 會(huì)出現(xiàn)小程序報(bào)錯(cuò)getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json

解決方案：

在app.json中 增加"permission"以及"requiredPrivateInfos"配置

{
    "pages": [
        "pages/index/index",
    ], 
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置將用于小程序位置接口的效果展示"
        }
    },
    "requiredPrivateInfos": ["getLocation","chooseLocation"],
}

配置后 小程序會(huì)出現(xiàn)彈窗 是否授權(quán)定位信息

確認(rèn)后即可正常獲取到地址信息 demo完成文章來源地址http://www.zghlxwxcb.cn/news/detail-500989.html