读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

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

2020年10月14日 71点热度 0人点赞 0条评论

首先在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>

 

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

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年10月14日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
闲谈 悦读 taro node react 随笔 小程序 mysql Nginx redux 阅读 canvas vue CSS Echarts JavaScript flutter git hook
推荐文章
  1. 小程序图片压缩
  2. 微信小程序中自定义导航和地图定位
  3. 微信小程序前端解密获取用户信息
  4. 微信小程序上传图片
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (40)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号