小程序笔记（9）调用腾讯api获取周边饮食店信息

实现功能

调用腾讯地图api查询到周边的餐饮店信息

将周边信息显示到map组件上

当滑动手机屏幕的时候,动态的加载周边饮食店

点击gps按钮能回到自己当前位置

• 效果图,左下角为gps按钮,回到初始位置

实现流程

1. 创建小程序工程（废话）
2. 申请api 腾讯地图开发平台
3. 查阅微信小程序开发文档,熟悉map组件的使用
4. 其中有系统位置的权限获取,需要在app.json中配置

基本逻辑实现

1. 在小程序加载完成的时候，获取到系统权限，将地图的中心点标记到当前位置，在本实验中，由于使用笔记本的ip地址只能定位到从化，所以并没有使用获取系统经纬度，而是使用准确的学校位置。

2. 在加载函数的时候，需要发起请求获取周边餐饮店的经纬度，并在markers中设置。

3. 绑定地图拉动事件，需要注意的是在地图拉动的时候会触发两次这个事件，第一次是你开始拉动的时候，这个时候无法获取到经纬度，如果不进行过滤就获取经纬度，会导致控制到报错，经纬度未定义。第二次触发的时候是拖动结束的时候，这个时候才来获取经纬度，并将经纬度设置到data中

4. 在地图拖动事件结束的时候，重新发起请求，获取周边的餐饮店，并push到原有数组里面，起到动态的获取餐饮店功能。

5. 在点击gps按钮的时候，会回到自身位置，与第一点一样，定位不准，使用确切的经纬度进行绑定。

6. 补充：由于调用api是异步的，手动滑动可以一直滑动，那么就存在一种现象，上一个请求未结束，又起一个请求，若频繁的滑动，则会导致小程序卡死，所以需要有一个标志，来判断是否已经在加载，从而避免了频繁的发起请求。

开始注册key

• 根据下图指引直接操作就好了,如果是多人使用就不要绑定appid

开始代码

先配置app.json中的权限获取

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

index.wxml

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" bindregionchange="dregmap" scale="{{scale}}"></map>

<!-- 覆盖在原生组件上的组件 -->
<cover-view class="mcv-top">
	<cover-image src="../../images/banner.png">
	</cover-image>
</cover-view>

<cover-view class="mcv-left-bottom">
	<cover-image src="../../images/gps.png" bindtap="clickGps">
	</cover-image>
</cover-view>

index.wxss

page{
  width: 100%;
  height: 100%;
}
map{
  width: 100%;
  height: 100%;
}

.mcv-top{
  position: absolute;
  top: 5rpx;
}

.mcv-left-bottom{
  position: absolute;
  left: 100rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
}

index.jsssssssssssssssssssssssssss

完整代码在后面

• 调用api最最主要的核心代码就是

  onLoad: function () {
    this.mapCtx = wx.createMapContext('map');
    var that = this;
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      // 腾讯api中的key
      key: '5ZMBZ-QCY6R-44IWM-WDL7S-EOA6V-4ABNS'
    });
    // 调用接口
    qqmapsdk.search({
      // 关键字
      keyword: '餐饮',
      // 本地经纬度
      location: "23.45092,113.492157",
      success: function (res) {
        console.log(res);

        var arrayll = [];
        for (var i = 0; i < res.data.length; i++) {
          arrayll.push({
            longitude: res.data[i].location.lng,
            latitude: res.data[i].location.lat,
            iconPath: "../../images/food.png",
            title: res.data[i].title
          })
        }
        that.setData({
          resultArray: res.data,
          markers: arrayll
        })
      }
    });
  },

• 对于地图视野发生变化的细节

  /* 用户拉动地图，动态加载周边餐饮 */
  dregmap: function (e) {

    // 判断是这是松开的位置
    if (e.type == "end") {
      var that = this;
      // 判断是否已经在加载
      var flag = that.data.flagLoad;
      // 获取到中心点位置
      this.mapCtx.getCenterLocation({
        success: function (res) {
          that.setData({
            longitude: res.longitude,
            latitude: res.latitude
          })
          var location = res.latitude + "," + res.longitude;
          console.log("地图中心点改变，继续加载餐饮店！！");
          // 如果没有在加载就进行加载
          if (!flag) {

• 完整代码

//index.js
//获取应用实例
const app = getApp()
// 引入SDK核心类
var QQMapWX = require("../../libs/qqmap-wx-jssdk.js");
// 腾讯地图api
var qqmapsdk;
// 地图的上下文对象
var mapCtx = null;

Page({
  data: {
    // 经纬度
    longitude: 113.492157,
    latitude: 23.45092,
    markers: [],
    scale: 16,
    // 是否已经在加载数据
    // 如果在加载数据的话就不要再加载
    // 避免重复加载，导致小程序卡死
    flagLoad: false

  },
  // 点击回到定位，并将地图缩放到最大
  clickGps: function (e) {
    this.setData({
      longitude: 113.492157,
      latitude: 23.45092,
      scale: 16
    })
  },
  
  onLoad: function () {
    this.mapCtx = wx.createMapContext('map');
    var that = this;
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: '5ZMBZ-QCY6R-44IWM-WDL7S-EOA6V-4ABNS'
    });
    // 调用接口
    qqmapsdk.search({
      keyword: '餐饮',
      location: "23.45092,113.492157",
      success: function (res) {
        console.log(res);

        var arrayll = [];
        for (var i = 0; i < res.data.length; i++) {
          arrayll.push({
            longitude: res.data[i].location.lng,
            latitude: res.data[i].location.lat,
            iconPath: "../../images/food.png",
            title: res.data[i].title
          })
        }
        that.setData({
          resultArray: res.data,
          markers: arrayll
        })
      }
    });
  },
  /* 用户拉动地图，动态加载周边餐饮 */
  dregmap: function (e) {

    // 判断是这是松开的位置
    if (e.type == "end") {
      var that = this;
      // 判断是否已经在加载
      var flag = that.data.flagLoad;
      // 获取到中心点位置
      this.mapCtx.getCenterLocation({
        success: function (res) {
          that.setData({
            longitude: res.longitude,
            latitude: res.latitude
          })
          var location = res.latitude + "," + res.longitude;
          console.log("地图中心点改变，继续加载餐饮店！！");
          // 如果没有在加载就进行加载
          if (!flag) {
            that.setData({
              flagLoad: true
            })
            // 调用接口
            qqmapsdk.search({
              keyword: '餐饮',
              location: location,
              success: function (res) {
                console.log(res);
                var arrayll = that.data.markers;
                // 防止数据太多导致小程序卡死
                if (arrayll.length > 30) {
                  arrayll = []
                }
                  // ji
                for (var i = 0; i < res.data.length; i++) {
                  arrayll.push({
                    longitude: res.data[i].location.lng,
                    latitude: res.data[i].location.lat,
                    iconPath: "../../images/food.png",
                    title: res.data[i].title
                  })
                }
                that.setData({
                  resultArray: res.data,
                  markers: arrayll,
                  flagLoad: false
                })
              }
            })
          }
        }
      })
    }
  }
})