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

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>

相关推荐
難釋懷5 分钟前
微信小程序案例 - 自定义 tabBar
微信小程序·小程序·notepad++
2501_915106322 小时前
常见 iOS 抓包工具的使用方式与组合思路
android·ios·小程序·https·uni-app·iphone·webview
说私域2 小时前
基于AI智能名片链动2+1模式S2B2C商城小程序的企业运营能力提升策略研究
大数据·人工智能·小程序·开源·流量运营
宁夏雨科网3 小时前
家电公司想开发小程序有没有现成的
小程序·家电·商城小程序·家电小程序·家电商城
计算机毕设指导63 小时前
基于微信小程序的咖啡店点餐系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea
计算机程序设计小李同学20 小时前
婚纱摄影集成管理系统小程序
java·vue.js·spring boot·后端·微信小程序·小程序
幽络源小助理1 天前
SpringBoot+小程序高校素拓分管理系统源码 – 幽络源免费分享
spring boot·后端·小程序
Mr -老鬼1 天前
移动端跨平台适配技术框架:从发展到展望
android·ios·小程序·uni-app
内存不泄露1 天前
棋牌预约小程序系统论文
小程序
计算机徐师兄1 天前
Java基于微信小程序的食堂线上预约点餐系统【附源码、文档说明】
java·微信小程序·食堂线上预约点餐系统小程序·食堂线上预约点餐微信小程序·java食堂线上预约点餐小程序·食堂线上预约点餐小程序·食堂线上预约点餐系统微信小程序