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

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 = poisi.title

var lat = poisi.location.lat

var lng = poisi.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: allMarkers0.latitude,

longitude: allMarkers0.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>

相关推荐
前端小木屋12 小时前
uniapp与蓝牙设备连接详细步骤
前端·微信小程序
万岳科技系统开发14 小时前
私域直播系统开发从0到1:企业直播平台搭建全过程
前端·小程序·架构
2501_9160074715 小时前
iOS应用性能优化全面指南:从内存管理到工具使用
android·ios·性能优化·小程序·uni-app·iphone·webview
i220818 Faiz Ul15 小时前
理财系统|基于java+vue的家庭理财系统小程序(源码+数据库+文档)
java·vue.js·spring boot·小程序·论文·毕设·理财系统
河北清兮网络科技16 小时前
企业软件开发全流程:从需求到上线,如何高效落地?
小程序·app·短剧·短剧app·广告联盟
维双云19 小时前
想做企业公司的教育知识付费小程序多少钱?
小程序
huang_jimei20 小时前
【无标题】
微信小程序
柚鸥ASO优化20 小时前
微信正在变成“搜索引擎”:小程序SEO机会全面爆发
搜索引擎·微信·小程序·小程序优化
Brave & Real1 天前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序
Joolun商城源码_Java1 天前
JooLun Pro旗舰版SaaS多租户商城:商城小程序与店铺小程序的功能区别详解
小程序