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

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>

相关推荐
他们叫我秃子21 小时前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发
2501_9151063221 小时前
iOS 反编译防护工具与实战组合 从静态侦察到 IPA 成品加固的工程化路径
android·ios·小程序·https·uni-app·iphone·webview
星光一影1 天前
快递比价寄件系统技术解析:基于PHP+Vue+小程序的高效聚合配送解决方案
vue.js·mysql·小程序·php
苹果电脑的鑫鑫1 天前
微信小程序原生如何使用画布生成名片
微信小程序·小程序
Dragon Wu1 天前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
游戏开发爱好者81 天前
iOS 26 iPhone 使用记录分析 多工具组合构建全方位设备行为洞察体系
android·ios·小程序·uni-app·cocoa·iphone·webview
星光一影2 天前
Java医院管理系统HIS源码带小程序和安装教程
java·开发语言·小程序
毕设源码-郭学长2 天前
【开题答辩全过程】以 基于微信小程序的个性化饮品定制点餐系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
马尚道2 天前
uniapp陪诊小程序
微信小程序
Terio_my2 天前
微信小程序-智慧社区项目开发完整技术文档(上)
微信小程序·小程序