小程序专栏

小程序使用腾讯的位置服务

读心悦 · 10月14日 · 2020年 本文1900字 · 阅读5分钟23

首先在lbs.qq.com上注册自己的账号(因为腾讯位置服务需要由自己独立的key)。

再下载对应的微信小程序JavaScript SDK。一般像这种公共JavaScript文件都是放置在utils目录下

在页面的JavaScript文件里引入位置服务的SDK,使用自己创建的KEY进行初始化:

JavaScript

var qqmap = require("../../utils/qqmap-wx-jssdk.js");
var qqmapsdk = new qqmap({
  key: '自己创建的key'
});

Page({
  onLoad: function() {
  },
  // 搜索
  search(e) {
    const that = this;
    qqmapsdk.getSuggestion({
      keyword: e.detail.value.word,
      success(res) {
        console.log(res)
      }
    });
    qqmapsdk.search({
      keyword: e.detail.value.word,
      success: function(res) {
        if (res.data.length === 0) {
          wx.showToast({
            title: '暂无数据请更换关键词',
            icon: '',
            duration: 0,
            mask: true,
            success: function(res) {},
            fail: function(res) {},
            complete: function(res) {},
          })
        } else {
          console.log(res)
          that.setData({
            data: res.data
          })
        }
      },
      fail: function(res) {
        wx.showModal({
          title: '异常',
          content: res.message,
          showCancel: true,
          cancelText: '取消',
          cancelColor: '',
          confirmText: '确定',
          confirmColor: '',
          success: function(res) {},
          fail: function(res) {},
          complete: function(res) {},
        })
      },
    });
    qqmapsdk.getCityList({
      success(res) {
        console.log(res)
      }
    });


  },
  onShow: function() {
    var _this = this;
    //调用获取城市列表接口
    qqmapsdk.getCityList({
      success: function(res) { //成功后的回调
        console.log(res);
        console.log('省份数据:', res.result[0])
        var city = res.result[0];
        //根据对应接口getCityList返回数据的Id获取区县数据(以北京为例)
        qqmapsdk.getDistrictByCityId({
          // 传入对应省份ID获得城市数据,传入城市ID获得区县数据,依次类推
          id: "520000", //对应接口getCityList返回数据的Id,如:北京是'110000'
          success: function(res) { //成功后的回调
            console.log(res);
            console.log('对应城市ID下的区县数据(以北京为例):', res.result[0]);
          },
          fail: function(error) {
            console.error(error);
          },
          complete: function(res) {
            console.log(res);
          }
        });
      },
      fail: function(error) {
        console.error(error);
      },
    });
  }

})

 

页面渲染

<!--index.wxml-->
<view class="container">
  <form catchsubmit="search">
    <input name="word" placeholder="请输入关键词"></input>
    <button type="primary" formType="submit">搜索</button>
  </form>

  搜索结果:
  <block wx:if="{{data}}" wx:for="{{data}}" wx:key="index">
    <view class="item">
      <view class="title">{{item.title}}</view>
      <view class="address">{{item.address}}</view>
    </view>
  </block>
</view>

 

更多详细的功能,可以参考官方文档,这篇仅仅记录自己开始使用腾讯位置服务的开发笔记!

0 条回应

×