微信小程序实现美食检索功能

1、打开浏览器搜索:腾讯位置服务

2、注册一个账号,有账号的直接登陆就行

3、注册登陆成功后,点击控制台

4、进入控制台后点击我的应用------>创建应用

5、添加key,注意看注释

6、key添加成功后,开始分配额度(配额)

点击配额管理分配额度

7、新建一个微信小程序,点击详情------>本地设置,不校验合法域名

8、.js文件

const app = getApp()

Page({

data: {

latitude: 39.909088,

longitude: 116.397643

},

buttonSearch(e){

var _this = this

var allMarkers = []

//通过wx.request发起HTTPS接口请求

wx.request({

//地图WebserviceAPI地点搜索接口请求路径及参数(具体使用方法请参考开发文档)

url: 'https://apis.map.qq.com/ws/place/v1/search?page_index=1\&page_size=20\&boundary=region(北京市,0)\&keyword=美食\&key=您的key',

success(res){

var result = res.data

var pois = result.data

for(var i = 0; i< pois.length; i++){

var title = pois[i].title

var lat = pois[i].location.lat

var lng = pois[i].location.lng

console.log(title+","+lat+","+lng)

const marker = {

id: i,

latitude: lat,

longitude: lng,

let: {

// 点击marker展示title

content: title

}

}

allMarkers.push(marker)

marker = null

}

_this.setData({

latitude: allMarkers[0].latitude,

longitude: allMarkers[0].longitude,

markers: allMarkers

})

}

})

}

})

9、.wxml文件

<view class="container">

<map id="map"

class="map"

markers="{{markers}}"

longitude="{{longitude}}" latitude="{{latitude}}">

</map>

</view>

<button size="mini" bindtap="buttonSearch">检索"美食"</button>

相关推荐
m0_694845576 分钟前
WePY是什么?小程序组件化开发框架实战教程
服务器·docker·小程序·开源·github
源码之家15 小时前
计算机毕业设计:基于Python的美食推荐分析系统 Django框架 爬虫 协同过滤推荐算法 可视化 推荐系统 数据分析 大数据(建议收藏)✅
爬虫·python·机器学习·django·flask·课程设计·美食
人还是要有梦想的20 小时前
如何开发微信小程序
微信小程序·小程序·notepad++
源码之家1 天前
计算机毕业设计:基于Python与协同过滤的美食推荐系统 Django框架 可视化 协同过滤推荐算法 菜谱 食品 机器学习(建议收藏)✅
爬虫·python·机器学习·django·毕业设计·课程设计·美食
源码之家1 天前
计算机毕业设计:基于Python的美食推荐可视化系统 Django框架 可视化 协同过滤推荐算法 推荐系统 食物 食品 大数据 数据分析(建议收藏)✅
python·django·flask·课程设计·推荐算法·美食
源码之家1 天前
计算机毕业设计:基于Python的美食菜谱数据分析可视化系统 Django框架 爬虫 机器学习 数据分析 可视化 食物 食品 菜谱(建议收藏)✅
爬虫·python·数据分析·django·flask·课程设计·美食
源码之家1 天前
计算机毕业设计:基于Python的汽车数据可视化分析系统 Django框架 Scrapy爬虫 可视化 车辆 懂车帝大数据 数据分析 机器学习(建议收藏)✅
python·信息可视化·django·flask·汽车·课程设计·美食
inksci2 天前
Js生成安全随机数
前端·微信小程序
azhou的代码园2 天前
基于SpringBoot+微信小程序的图片识别科普系统
spring boot·后端·微信小程序
万岳科技系统开发2 天前
外卖系统选型与源码与 SaaS 实践的思考
数据库·小程序