騰訊位置服務(wù)使用方法詳解（三）

騰訊位置服務(wù)使用方法詳解（一）
騰訊位置服務(wù)使用方法詳解（二）

4.個(gè)性化地圖樣式

為什么要用個(gè)性化地圖，提高不同場(chǎng)景下地圖的展現(xiàn)效果和用戶(hù)體驗(yàn)。


image

為什么選擇騰訊位置服務(wù)個(gè)性化地圖：

  • 全平臺(tái)通用
  • 開(kāi)發(fā)成本極小
  • 個(gè)性化樣式支持動(dòng)態(tài)更新
  • 支持全局配置和分級(jí)配置
  • 編輯平臺(tái)UI控件全面優(yōu)化
  • 每個(gè)元素可配置的屬性全部開(kāi)放
  • 能夠支持自定義的地圖元素?cái)U(kuò)充為52種

5.騰訊位置入門(mén)步驟

1.登錄騰訊位置服務(wù)


image

2.驗(yàn)證手機(jī) 與 郵箱
3.申請(qǐng)開(kāi)發(fā)密鑰（Key）
4.選擇您需要的產(chǎn)品

位置展示組件


image

路線規(guī)劃組件


image
image
image
地圖選點(diǎn)組件
image

前端定位組件


image

三.微信小程序JavaScript SDK

1.我申請(qǐng)了開(kāi)發(fā)者密鑰key
2.開(kāi)通webserviceAPI服務(wù)：控制臺(tái) -> key管理 -> 設(shè)置（使用該功能的key）-> 勾選webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服務(wù)，所以使用該功能的KEY需要具備相應(yīng)的權(quán)限)
日調(diào)用量：1萬(wàn)次 / Key----并發(fā)數(shù)：5次 / key / 秒 。

onLoad() {
    console.log('頁(yè)面加載了')
    // 實(shí)例化API核心類(lèi)
    qqmapsdk = new QQMapWX({
        // key: '申請(qǐng)的key'
    });
},
onShow() {
    console.log('頁(yè)面顯示了')
    // 調(diào)用接口dadaqianduan
    qqmapsdk.search({
        keyword: '酒店',
        success: (res) => {
            console.log(res);
        },
        fail: (err) => {
            console.log(err);
        },
        complete: (cres) => {
            console.log(cres);
        }
    })
},

我返回的數(shù)據(jù)如圖：


image

QQMapWX – 小程序JavaScriptSDK核心類(lèi) – new QQMapWX(options:Object)


image
// 引入SDK核心類(lèi)
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 實(shí)例化API核心類(lèi)
var demo = new QQMapWX({
    key: '開(kāi)發(fā)密鑰（key）' // 必填
});

地點(diǎn)搜索：

// 地點(diǎn)搜索
nearbySearchBtn() {
    qqmapsdk.search({
        keyword: 'kfc', //搜索關(guān)鍵詞
        location: '39.980014,116.313972', //設(shè)置周邊搜索中心點(diǎn)
        success: (res) => {
            var mks = []
            for (var i = 0; i < res.data.length; i++) {
                mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
                    title: res.data[i].title,
                    id: res.data[i].id,
                    latitude: res.data[i].location.lat,
                    longitude: res.data[i].location.lng,
                    iconPath: "/location.png", //圖標(biāo)路徑
                    width: 20,
                    height: 20
                })
            }
            this.markers = mks
        },
        fail: (res) => {
            console.log(res);
        },
        complete: (res) => {
            console.log(res);
        }
    });
},

效果如圖：


image
<script>
    // 引入SDK核心類(lèi)，js文件根據(jù)自己業(yè)務(wù)，位置可自行放置
    // var QQMapWX = require('../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js');
    import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
    var qqmapsdk;
    export default {
        components: {},
        data() {
            return {
                backfill: '',
                markers: [],
                suggestion: [],
            }
        },
        onLoad() {
            console.log('頁(yè)面加載了') // 實(shí)例化API核心類(lèi)
            qqmapsdk = new QQMapWX({ // key: '申請(qǐng)的key'
                key: '自己申請(qǐng)，我的就不放出來(lái)了'
            });
        },
        onShow() {
            console.log('頁(yè)面顯示了') // 調(diào)用接口dadaqianduan
            qqmapsdk.search({
                keyword: '酒店',
                success: (res) => {
                    console.log(res);
                },
                fail: (err) => {
                    console.log(err);
                },
                complete: (cres) => {
                    console.log(cres);
                }
            })
        },
        onReady() {
            console.log('頁(yè)面初次渲染完成了')
        },
        methods: {
            getsuggest(e) {
                console.log(e.detail.value)
                qqmapsdk.getSuggestion({
                  keyword: e.detail.value, //用戶(hù)輸入的關(guān)鍵詞，可設(shè)置固定值,如keyword:'KFC'
                  //region:'北京', //設(shè)置城市名，限制關(guān)鍵詞所示的地域范圍，非必填參數(shù)
                  success: (res) => {//搜索成功后的回調(diào)
                    console.log(res);
                    var sug = [];
                    for (var i = 0; i < res.data.length; i++) {
                      sug.push({ // 獲取返回結(jié)果，放到sug數(shù)組中
                        title: res.data[i].title,
                        id: res.data[i].id,
                        addr: res.data[i].address,
                        city: res.data[i].city,
                        district: res.data[i].district,
                        latitude: res.data[i].location.lat,
                        longitude: res.data[i].location.lng
                      });
                    }
                     this.suggestion = sug
                  },
                  fail: (error)=> {
                    console.error(error);
                  },
                  complete: (res)=> {
                    console.log(res);
                  }
                });
            },
            backfillBtn(e) {
                var id = e.currentTarget.id;
                for (var i = 0; i < this.suggestion.length; i++) {
                    if (i == id) {
                        this.backfill = this.suggestion[i].title
                    }
                }
            },
            // 地點(diǎn)搜索
            nearbySearchBtn() {
                qqmapsdk.search({
                    keyword: 'kfc', //搜索關(guān)鍵詞
                    location: '39.980014,116.313972', //設(shè)置周邊搜索中心點(diǎn)
                    success: (res) => {
                        var mks = []
                        for (var i = 0; i < res.data.length; i++) {
                            mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
                                title: res.data[i].title,
                                id: res.data[i].id,
                                latitude: res.data[i].location.lat,
                                longitude: res.data[i].location.lng,
                                iconPath: "/static/location.png", //圖標(biāo)路徑
                                width: 20,
                                height: 20
                            })
                        }
                        this.markers = mks
                    },
                    fail: (res) => {
                        console.log(res);
                    },
                    complete: (res) => {
                        console.log(res);
                    }
                });
            },
        },
        onHide() {
            console.log('頁(yè)面隱藏了')
        },
    }
</script>

預(yù)覽效果如圖下：


image
<script>
    import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
    var qqmapsdk;
    export default {
        components: {},
        data() {
            return {
                backfill: '',
                markers: [],
                poi: {
                    latitude: 39.984060,
                    longitude: 16.307520
                },
            }
        },
        onLoad() {
            console.log('頁(yè)面加載了') // 實(shí)例化API核心類(lèi)
            qqmapsdk = new QQMapWX({ // key: '申請(qǐng)的key'
                key: ''
            });
        },
        onShow() {
            console.log('頁(yè)面顯示了')
        },
        onReady() {
            console.log('頁(yè)面初次渲染完成了')
        },
        methods: {
            formSubmit(e) {
                qqmapsdk.reverseGeocoder({
                    location: e.detail.value.reverseGeo || '',
                    //獲取表單傳入的位置坐標(biāo),不填默認(rèn)當(dāng)前位置,示例為string格式
                    //get_poi: 1, //是否返回周邊POI列表：1.返回；0不返回(默認(rèn)),非必須參數(shù)
                    success: (res) => {
                        console.log(res);
                        var res = res.result;
                        var mks = [];
                        /**
                         *  當(dāng)get_poi為1時(shí)，檢索當(dāng)前位置或者location周邊poi數(shù)據(jù)并在地圖顯示，可根據(jù)需求是否使用
                         *
                            for (var i = 0; i < result.pois.length; i++) {
                            mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
                                title: result.pois[i].title,
                                id: result.pois[i].id,
                                latitude: result.pois[i].location.lat,
                                longitude: result.pois[i].location.lng,
                                iconPath: './resources/placeholder.png', //圖標(biāo)路徑
                                width: 20,
                                height: 20
                            })
                            }
                        *
                        **/
                        //當(dāng)get_poi為0時(shí)或者為不填默認(rèn)值時(shí)，檢索目標(biāo)位置，按需使用
                        mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
                            title: res.address,
                            id: 0,
                            latitude: res.location.lat,
                            longitude: res.location.lng,
                            iconPath: '/static/location.png', //圖標(biāo)路徑
                            width: 20,
                            height: 20,
                            callout: { //在markers上展示地址名稱(chēng)，根據(jù)需求是否需要
                                content: res.address,
                                color: '#000',
                                display: 'ALWAYS'
                            }
                        });
                        this.markers = mks;
                        // this.poi = {
                        //  latitude: res.location.lat,
                        //  longitude: res.location.lng
                        // }
                    },
                    fail: (error) => {
                        console.error(error);
                    },
                    complete: (res) => {
                        console.log(res);
                    }
                })
            }
        },
        onHide() {
            console.log('頁(yè)面隱藏了')
        },
    }
</script>

geocoder – 提供由地址描述到所述位置坐標(biāo)的轉(zhuǎn)換，與逆地址解析reverseGeocoder()的過(guò)程正好相反。
預(yù)覽效果如圖：


image
formSubmit(e) {
    //調(diào)用地址解析接口
    qqmapsdk.geocoder({
      //獲取表單傳入地址 e.detail.value.geocoder
      address: e.detail.value, //地址參數(shù)，例：固定地址，address: '北京市海淀區(qū)彩和坊路海淀西大街74號(hào)'
      success: (res)=> {//成功后的回調(diào)
        console.log(res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //根據(jù)地址解析在地圖上標(biāo)記解析地址位置
         this.markers = [{
            id: 0,
            title: res.title,
            latitude: latitude,
            longitude: longitude,
            iconPath: '/static/location.png',//圖標(biāo)路徑
            width: 20,
            height: 20,
            callout: { //可根據(jù)需求是否展示經(jīng)緯度
              content: latitude + ',' + longitude,
              color: '#000',
              display: 'ALWAYS'
            }
          }],
          this.poi= { //根據(jù)自己data數(shù)據(jù)設(shè)置相應(yīng)的地圖中心坐標(biāo)變量名稱(chēng)
            latitude: Number(latitude),
            longitude:  Number(longitude),
          }
      },
      fail: (error)=> {
        console.error(error);
      },
      complete: (res)=> {
        console.log(res);
      }
    })
}

預(yù)覽效果圖如下：


image
formSubmit(e){
        //調(diào)用距離計(jì)算接口
        console.log(this.start,'dadaqianduan')
        qqmapsdk.calculateDistance({
            //mode: 'driving',//可選值：'driving'（駕車(chē)）、'walking'（步行），不填默認(rèn)：'walking',可不填
            //from參數(shù)不填默認(rèn)當(dāng)前地址
            //獲取表單提交的經(jīng)緯度并設(shè)置from和to參數(shù)（示例為string格式）
            // from: e.detail.value.start || '', //若起點(diǎn)有數(shù)據(jù)則采用起點(diǎn)坐標(biāo)，若為空默認(rèn)當(dāng)前地址
            from: this.start || '',
            to: this.end,
            // to: e.detail.value.dest, //終點(diǎn)坐標(biāo)
            success: (res)=> {//成功后的回調(diào)
              console.log(res);
              var res = res.result;
              var dis = [];
              for (var i = 0; i < res.elements.length; i++) {
                dis.push(res.elements[i].distance); //將返回?cái)?shù)據(jù)存入dis數(shù)組，
              }
              this.distance=dis
            },
            fail: (error)=> {
              console.error(error);
            },
            complete: (res)=> {
              console.log(res);
            }
        });
    }
},

調(diào)用獲取城市列表接口，效果圖如下：


image
onShow() {
    console.log('頁(yè)面顯示了')
    //調(diào)用獲取城市列表接口
    qqmapsdk.getCityList({
        success: (res) => { //成功后的回調(diào)
            console.log(res);
            console.log('省份數(shù)據(jù)：', res.result[0]); //打印省份數(shù)據(jù)
            this.a = res.result[0]
            console.log('城市數(shù)據(jù)：', res.result[1]); //打印城市數(shù)據(jù)
            this.b = res.result[1]
            console.log('區(qū)縣數(shù)據(jù)：', res.result[2]); //打印區(qū)縣數(shù)據(jù)
            this.c = res.result[2]
        },
        fail: (error) => {
            console.error(error);
        },
        complete: (res) => {
            console.log(res);
        }
    });
},

獲取城市區(qū)縣，效果圖如下：


image
onShow() {
    console.log('頁(yè)面顯示了')
    //調(diào)用獲取城市列表接口
    qqmapsdk.getCityList({
        success: (res) => { //成功后的回調(diào)
            console.log(res);
            console.log('省份數(shù)據(jù)：', res.result[0])
            var city = res.result[0];
            //根據(jù)對(duì)應(yīng)接口getCityList返回?cái)?shù)據(jù)的Id獲取區(qū)縣數(shù)據(jù)（以北京為例）
            qqmapsdk.getDistrictByCityId({
                // 傳入對(duì)應(yīng)省份ID獲得城市數(shù)據(jù)，傳入城市ID獲得區(qū)縣數(shù)據(jù),依次類(lèi)推
                id: city[0].id, //對(duì)應(yīng)接口getCityList返回?cái)?shù)據(jù)的Id，如：北京是'110000'
                success: (res) => { //成功后的回調(diào)
                    console.log(res);
                    console.log('對(duì)應(yīng)城市ID下的區(qū)縣數(shù)據(jù)(以北京為例)：', res.result[0]);
                },
                fail: (error) => {
                    console.error(error);
                },
                complete: (res) => {
                    console.log(res);
                }
            });
        },
        fail: (error) => {
            console.error(error);
        },
        complete: (res) => {
            console.log(res);
        }
    });
},

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


image
image

image
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容