目錄

微信小程序JavaScript

簡介

Hello world！

geocoder(options:Object)

微信小程序插件

簡介

路線規(guī)劃插件

入駐騰訊位置服務(wù)平臺(tái)

申請(qǐng)開發(fā)者密鑰（Key）：申請(qǐng)秘鑰

Key的作用與注意事項(xiàng)

微信公眾平臺(tái)綁定插件

方式一：

方式二：

方式三：

插件介紹

接入指引

相關(guān)參數(shù)說明

插件錯(cuò)誤處理

效果圖

?實(shí)戰(zhàn)應(yīng)用

微信小程序JavaScript

簡介

????????騰訊位置服務(wù)為微信小程序提供了基礎(chǔ)的標(biāo)點(diǎn)能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點(diǎn)等地圖API位置服務(wù)能力支持，使得開發(fā)者可以自由地實(shí)現(xiàn)自己的微信小程序產(chǎn)品。 在此基礎(chǔ)上，騰訊位置服務(wù)微信小程序JavaScript SDK是專為小程序開發(fā)者提供的LBS數(shù)據(jù)服務(wù)工具包，可以在小程序中調(diào)用騰訊位置服務(wù)的POI檢索、關(guān)鍵詞輸入提示、地址解析、逆地址解析、行政區(qū)劃和距離計(jì)算等數(shù)據(jù)服務(wù)，讓您的小程序更強(qiáng)大！

Hello world！

1. 申請(qǐng)開發(fā)者密鑰（key）：申請(qǐng)密鑰

2. 開通webserviceAPI服務(wù)：控制臺(tái) ->應(yīng)用管理 ->?我的應(yīng)用?->添加key-> 勾選WebServiceAPI -> 保存

   (小程序SDK需要用到webserviceAPI的部分服務(wù)，所以使用該功能的KEY需要具備相應(yīng)的權(quán)限)

3. 下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1???JavaScriptSDK v1.2

4. 安全域名設(shè)置，在小程序管理后臺(tái)?-> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名，添加https://apis.map.qq.com

geocoder(options:Object)

????????提供由地址描述到所述位置坐標(biāo)的轉(zhuǎn)換，與逆地址解析reverseGeocoder()的過程正好相反。

????????注：坐標(biāo)系采用gcj02坐標(biāo)系

options屬性說明

調(diào)用結(jié)果

????????通過屬性success, fail, complete的回調(diào)參數(shù)來接收調(diào)用結(jié)果

????????success的回調(diào)參數(shù)可以有2個(gè)，第1個(gè)參數(shù)接收調(diào)用結(jié)果，第2個(gè)參數(shù)控制返回處理后的數(shù)據(jù)（非必須參數(shù)）,示例：success:function(res,data)

????????該屬性適用于?jssdkv1.1?jssdkv1.2

示例

WXML 模板文件中添加組件：

<!--地圖容器-->
<!--longitude及l(fā)atitude為設(shè)置為調(diào)轉(zhuǎn)到指定地址位置，默認(rèn)不顯示-->
<map id="myMap"
    markers="{{markers}}"
    style="width:100%;height:300px;"
    longitude="{{poi.longitude}}"
    latitude="{{poi.latitude}}"
    scale='16' show-location>
</map>
<!--form表單-->
<form bindsubmit="formSubmit">
    <!--地址描述輸入框,示例：北京市海淀區(qū)彩和坊路海淀西大街74號(hào)-->
    <input style="border:1px solid #000;" name="geocoder"></input>
    <!--提交表單數(shù)據(jù)-->
    <button form-type="submit">地址解析</button>
</form>
<!--地址描述經(jīng)緯度展示-->
<view>地址緯度：{{poi.latitude}}</view>
<view>地址經(jīng)度：{{poi.longitude}}</view>

Javascript 關(guān)鍵代碼片段：

// 引入SDK核心類
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 實(shí)例化API核心類
var qqmapsdk = new QQMapWX({
    key: '開發(fā)密鑰（key）' // 必填
});
 
//在Page({})中使用下列代碼
//觸發(fā)表單提交事件，調(diào)用接口
formSubmit(e) {
    var _this = this;
    //調(diào)用地址解析接口
    qqmapsdk.geocoder({
      //獲取表單傳入地址
      address: e.detail.value.geocoder, //地址參數(shù)，例：固定地址，address: '北京市海淀區(qū)彩和坊路海淀西大街74號(hào)'
      success: function(res) {//成功后的回調(diào)
        console.log(res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //根據(jù)地址解析在地圖上標(biāo)記解析地址位置
        _this.setData({ // 獲取返回結(jié)果，放到markers及poi中，并在地圖展示
          markers: [{
            id: 0,
            title: res.title,
            latitude: latitude,
            longitude: longitude,
            iconPath: './resources/placeholder.png',//圖標(biāo)路徑
            width: 20,
            height: 20,
            callout: { //可根據(jù)需求是否展示經(jīng)緯度
              content: latitude + ',' + longitude,
              color: '#000',
              display: 'ALWAYS'
            }
          }],
          poi: { //根據(jù)自己data數(shù)據(jù)設(shè)置相應(yīng)的地圖中心坐標(biāo)變量名稱
            latitude: latitude,
            longitude: longitude
          }
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    })
}

微信小程序插件

簡介

????完整的地圖能力

????????騰訊位置服務(wù)基于微信提供的小程序插件能力，專注于（圍繞）地圖功能，打造一系列小程序插件，可以幫助開發(fā)者簡單、快速的構(gòu)建小程序，是您實(shí)現(xiàn)地圖功能的極佳伙伴。 目前騰訊位置服務(wù)提供路線規(guī)劃、地圖選點(diǎn)、地鐵圖、城市選擇器四款插件產(chǎn)品，歡迎大家體驗(yàn)！

????????路線規(guī)劃：路線規(guī)劃插件提供地圖路線規(guī)劃功能。根據(jù)起終點(diǎn)，智能規(guī)劃駕車、公交、步行出行路線及詳情。開發(fā)者可以將路線規(guī)劃插件嵌入到自建小程序的頁面里，實(shí)現(xiàn)路線規(guī)劃功能。

????????地鐵圖：支持全國重點(diǎn)城市地鐵線路靜態(tài)展示、信息查詢、線路檢索及規(guī)劃功能。

????????地圖選點(diǎn)：快速、準(zhǔn)確地選擇并確認(rèn)自己的當(dāng)前位置，并將相關(guān)位置信息回傳給開發(fā)者。同時(shí)我們還提供位置檢索、關(guān)鍵詞分類等輔助功能。

????????城市選擇器：可以讓用戶快速、準(zhǔn)確地選擇城市，并將城市信息回傳給開發(fā)者。我們的插件提供單頁模式和組件模式兩種形式，并支持搜索和索引等功能。

地圖插件的優(yōu)勢(shì)

• 豐富插件市場(chǎng)

?????????豐富的地圖插件產(chǎn)品，為開發(fā)者提供更多的選擇，滿足不同的應(yīng)用場(chǎng)景。后續(xù)我們將繼續(xù)擴(kuò)展插件產(chǎn)品種類，敬請(qǐng)期待！

• 節(jié)約開發(fā)成本

?????????插件本身具有強(qiáng)大的靈活性，無需開發(fā)者投入專業(yè)的人力研發(fā)，就可以擁有地圖能力，縮減企業(yè)研發(fā)成本。

• 專業(yè)的行業(yè)方案

?????????騰訊位置服務(wù)專注于地圖能力，多年服務(wù)政企、美團(tuán)、京東、滴滴等大客戶的經(jīng)驗(yàn)，鍛造了更加專業(yè)的產(chǎn)品并提供更優(yōu)秀的行業(yè)解決方案。

路線規(guī)劃插件

?

入駐騰訊位置服務(wù)平臺(tái)

????登陸騰訊位置服務(wù)官網(wǎng)?lbs.qq.com，支持QQ、微信、手機(jī)號(hào)注冊(cè)賬號(hào)。

????第一步，點(diǎn)擊官網(wǎng)右上角“登陸”按鈕。

????第二步，點(diǎn)擊后頁面有彈框：系統(tǒng)支持 微信、QQ、手機(jī)號(hào)登錄，可以任選一種進(jìn)行后續(xù)操作：

申請(qǐng)開發(fā)者密鑰（Key）：申請(qǐng)秘鑰

???1. 官網(wǎng)控制臺(tái)，點(diǎn)擊左側(cè)“應(yīng)用管理”->“我的應(yīng)用”->“創(chuàng)建應(yīng)用”，在開發(fā)者密鑰申請(qǐng)頁面按要求填寫申請(qǐng)信息

????

???2. Key創(chuàng)建成功后：控制臺(tái) ->應(yīng)用管理->?我的應(yīng)用?-> 設(shè)置（使用該功能的key）-> 勾選“微信小程序” -> 填寫“授權(quán) APP ID” ->勾選“WebServiceAPI” ->保存。 需要注意的是如果填寫了域名白名單，需要把“servicewechat.com”域名添加進(jìn)域名白名單中，否則小程序下將無法正常使WebServiceAPI服務(wù)（如下圖所示）

????

Key的作用與注意事項(xiàng)

Key用途

???Key 用于識(shí)別開發(fā)者身份、驗(yàn)證權(quán)限，并在某些情況下方便聯(lián)系到您。不使用 Key 會(huì)導(dǎo)致您無法使用微信小程序插件。

Key使用限制

申請(qǐng)企業(yè)認(rèn)證后，可以在控制臺(tái)->配額申請(qǐng)中申請(qǐng)你需要的配額，我們將對(duì)您的申請(qǐng)進(jìn)行評(píng)估并進(jìn)行審批（3個(gè)工作日內(nèi)），審批通過后將會(huì)獲得您申請(qǐng)的配額。

若當(dāng)前檔位額度配額度仍不夠用，可在控制臺(tái)->配額管理中根據(jù)自己的業(yè)務(wù)需求購買調(diào)用量和并發(fā)量。各接口的配額上限參見配額限制說明。

地鐵圖插件

路線規(guī)劃插件

地圖選點(diǎn)插件

城市選擇器插件

微信公眾平臺(tái)綁定插件

方式一：

???1.?注冊(cè)微信小程序 -> 開通插件功能（開通入口：小程序管理后臺(tái)-小程序插件）

???2. 小程序管理后臺(tái)添加插件：小程序管理后臺(tái)-設(shè)置-第三方設(shè)置-插件管理，右側(cè)點(diǎn)擊“添加插件”。根據(jù)AppID查找需要的插件，并申請(qǐng)使用。 更多微信小程序開發(fā)相關(guān)文檔請(qǐng)瀏覽，微信官方文檔
??????開放范圍：小程序使用的插件，其插件類目不能超過小程序主體類型當(dāng)前開放的范圍，具體見開放的服務(wù)類目表。

????

????

方式二：

??????若通過上述方式，在微信平臺(tái)搜索不到插件可以通過第二種方式在開發(fā)者工具直接引入，步驟如下：
?????? 1）打開調(diào)試控制臺(tái)，并直接向app.json添加需要使用的插件并保存（城市選擇器插件接入指引），如需使用其他插件，請(qǐng)參考其他指引

????

?????? 2） 調(diào)試控制臺(tái)提示插件未授權(quán)使用，點(diǎn)擊添加插件

????

?????? 3） 會(huì)彈出添加彈框，點(diǎn)擊添加并收到添加成功提示即可

????

??????

方式三：

??????若通過上述方式都未能成功，可以通過方式三添加：
??????頁面位置：小程序管理后臺(tái)-設(shè)置-第三方設(shè)置
??????1、點(diǎn)擊服務(wù)市場(chǎng)
??????

??????2、按下圖所示找到需要的插件
??????

??????3、點(diǎn)擊需要的插件,進(jìn)入詳情頁點(diǎn)擊添加插件
??????

??????4、選擇需要授權(quán)的小程序
??????

??????

??????

插件介紹

????????騰訊位置服務(wù)路線規(guī)劃插件 提供路線規(guī)劃等功能，根據(jù)起終點(diǎn)，多種出行方式智能規(guī)劃最佳出行路線及詳情。開發(fā)者可以將路線規(guī)劃插件嵌入到自建小程序的頁面里，實(shí)現(xiàn)路線規(guī)劃功能。

????????請(qǐng)掃描二維碼，在手機(jī)端體驗(yàn)路線規(guī)劃插件Demo。

接入指引

????????1、插件申請(qǐng)接入：

????????在騰訊微信公眾平臺(tái)中， “微信小程序官方后臺(tái)-設(shè)置-第三方服務(wù)-插件管理” 里點(diǎn)擊 “添加插件”，搜索 “騰訊位置服務(wù)路線規(guī)劃” 申請(qǐng)，申請(qǐng)后小程序開發(fā)者可在小程序內(nèi)使用該插件。

????????2、引入插件包： 路線規(guī)劃appId： wx50b5593e81dd937a （點(diǎn)擊瀏覽插件最新版本）

// app.json
{
    "plugins": {
        "routePlan": {
        "version": "1.0.18",
        "provider": "wx50b5593e81dd937a"
        }
    }
} 

????????3、設(shè)置定位授權(quán)：

????????路線規(guī)劃插件需要小程序提供定位授權(quán)才能夠正常使用定位功能：

// app.json
{
    "permission": {
        "scope.userLocation": {
        "desc": "你的位置信息將用于小程序定位"
        }
    }
}

????????4、使用插件：

????????插件頁面調(diào)用示例：

let plugin = requirePlugin('routePlan');
let key = '';  //使用在騰訊位置服務(wù)申請(qǐng)的key
let referer = '';   //調(diào)用插件的app的名稱
let endPoint = JSON.stringify({  //終點(diǎn)
    'name': '吉野家(北京西站北口店)',
    'latitude': 39.89631551,
    'longitude': 116.323459711
});
wx.navigateTo({
    url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

相關(guān)參數(shù)說明

????????插件頁面參數(shù)

????????startPoint, endPoint 說明

插件錯(cuò)誤處理

?????插件頁面?zhèn)鬟f參數(shù)錯(cuò)誤處理說明：

• 當(dāng)必傳參數(shù)沒有傳時(shí)，插件頁面內(nèi)容不展示
• 當(dāng)經(jīng)緯度超出正確范圍時(shí)，插件頁面內(nèi)容不展示

?????頁面錯(cuò)誤碼列表：

效果圖

?實(shí)戰(zhàn)應(yīng)用

只展示頁面使用 請(qǐng)按照上文提示 接入微信小程序插件以及導(dǎo)入 sdk文章來源地址http://www.zghlxwxcb.cn/news/detail-849938.html

    let QQMapWX = require("../../../utils/qqmap-wx-jssdk.min");
    let plugin = requirePlugin("routePlan");
    // 實(shí)例化API核心類
    let qqmapsdk = new QQMapWX({
      key: " ", // 必填
    });
  // 獲取經(jīng)緯度
  getAddressIp() {
    return new Promise((resolve, reject) => {
      let { data } = this.data;
      if (!qqmapsdk) {
        reject({
          message: "地圖初始化失敗",
        });
      }
      if (!data.shopAddress) {
        reject({
          message: "暫無詳細(xì)地址",
        });
      }

      //調(diào)用地址解析接口
      qqmapsdk.geocoder({
        //地址參數(shù)，例：固定地址，address: '北京市海淀區(qū)彩和坊路海淀西大街74號(hào)'
        address: data.shopAddress,
        success: (res) => {
          //成功后的回調(diào)
          resolve(res);
        },
        fail: (error) => {
          reject(error);
        },
      });
    });
  },
  // 導(dǎo)航商戶位置
  async goMap() {
    try {
      let { data } = this.data;
      let { message, status, result } = await this.getAddressIp();
      if (status != 0) {
        this.showToast("獲取地址接口:" + message || "獲取經(jīng)緯度失敗");
        return;
      }
      console.log(result, "地址詳情====");
      const key = ""; //使用在騰訊位置服務(wù)申請(qǐng)的key
      const referer = ""; //調(diào)用插件的app的名稱
      let endPoint = JSON.stringify({
        //終點(diǎn)
        name: data.shopAddress,
        latitude: result.location.latitude,
        longitude: result.location.longitude,
      });
      wx.navigateTo({
        url:
          "plugin://routePlan/index?key=" +
          key +
          "&referer=" +
          referer +
          "&endPoint=" +
          endPoint,
      });
    } catch (error) {
      console.log(error);
      this.showToast("獲取地址接口:" + error.message || "獲取經(jīng)緯度失敗");
    }
  },

到了這里，關(guān)于微信小程序 --- 騰訊地圖線路規(guī)劃的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！