调用腾讯api获取周边饮食店信息
实现功能
调用腾讯地图api查询到周边的餐饮店信息
将周边信息显示到
map
组件上当滑动手机屏幕的时候,动态的加载周边饮食店
点击
gps
按钮能回到自己当前位置
- 效果图,左下角为
gps
按钮,回到初始位置
实现流程
- 创建小程序工程(废话)
- 申请api 腾讯地图开发平台
- 查阅微信小程序开发文档,熟悉
map
组件的使用 - 其中有系统位置的权限获取,需要在
app.json
中配置
基本逻辑实现
-
在小程序加载完成的时候,获取到系统权限,将地图的中心点标记到当前位置,在本实验中,由于使用笔记本的ip地址只能定位到从化,所以并没有使用获取系统经纬度,而是使用准确的学校位置。
-
在加载函数的时候,需要发起请求获取周边餐饮店的经纬度,并在
markers
中设置。 -
绑定地图拉动事件,需要注意的是在地图拉动的时候会触发两次这个事件,第一次是你开始拉动的时候,这个时候无法获取到经纬度,如果不进行过滤就获取经纬度,会导致控制到报错,经纬度未定义。第二次触发的时候是拖动结束的时候,这个时候才来获取经纬度,并将经纬度设置到data中
-
在地图拖动事件结束的时候,重新发起请求,获取周边的餐饮店,并push到原有数组里面,起到动态的获取餐饮店功能。
-
在点击
gps按钮
的时候,会回到自身位置,与第一点一样,定位不准,使用确切的经纬度进行绑定。 -
补充:由于调用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
})
}
})
}
}
})
}
}
})