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

news2025/1/17 15:21:17

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1622850.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

人工智能(AI)与地理信息技术(GIS)的融合:开启智能地理信息时代

随着科技的不断发展&#xff0c;人工智能&#xff08;AI&#xff09;和地理信息技术&#xff08;GIS&#xff09;的应用越来越广泛&#xff0c;两者的结合更是为许多行业带来了前所未有的变革。本文将以“人工智能&#xff08;AI&#xff09;地理信息技术&#xff08;GIS&#…

【C++】5.C语言/C++内存管理

一、C/C内存分布 栈中存储的是局部变量&#xff0c;函数参数&#xff0c;返回值等 堆主要用于动态内存分配 数据段用以存储全局数据和静态数据 代码段存储可执行代码和常量 二、C语言和C中的内存管理方式 在C语言中&#xff0c;我们使用 malloc、calloc、realloc、free来进…

理解与使用Linux设备树编译器(DTC)

这里写目录标题 设备树简介设备树编译器&#xff08;DTC&#xff09;安装DTC使用DTC实例&#xff1a;编辑设备树小结参考资料 Linux设备树编译器&#xff08;DTC&#xff09;是一个关键工具&#xff0c;用于处理嵌入式Linux系统中的设备树文件。本文将介绍设备树的概念、DTC的基…

深入理解 Srping IOC

什么是 Spring IOC&#xff1f; IOC 全称&#xff1a;Inversion of Control&#xff0c;翻译为中文就是控制反转&#xff0c;IOC 是一种设计思想&#xff0c;IOC 容器是 Spring 框架的核心&#xff0c;它通过控制和管理对象之间的依赖关系来实现依赖注入&#xff08;Dependenc…

每日一题:托普利茨矩阵

给你一个 m x n 的矩阵 matrix 。如果这个矩阵是托普利茨矩阵&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果矩阵上每一条由左上到右下的对角线上的元素都相同&#xff0c;那么这个矩阵是 托普利茨矩阵 。 示例 1&#xff1a; 输入&#xff1a;matrix…

最新windows版本erlang26.0和rabbitmq3.13下载

Erlang下载 官网下载&#xff1a;https://www.erlang.org/patches/otp-26.0 百度网盘&#xff1a;https://pan.baidu.com/s/1xU4syn14Bh7QR-skjm_hOg 提取码&#xff1a;az1t RabbtitMQ下载 官网下载&#xff1a;https://www.rabbitmq.com/docs/install-windows 百度网盘…

【C++题解】1302. 是否适合晨练?

问题&#xff1a;1302. 是否适合晨练&#xff1f; 类型&#xff1a;分支 题目描述&#xff1a; 夏天到了&#xff0c;气温太高&#xff0c;小明的爷爷每天有晨练的习惯&#xff0c;但有时候温度不适合晨练&#xff1b;小明想编写一个程序&#xff0c;帮助爷爷判断温度是否适合…

同一工程中不同RS的问题结论

目录 MeshDevice/deviceAll && /wvp/device ​编辑 故意改成mesh下的RS,结果包裹了&#xff1a; sys2/redishealth ​编辑 ​编辑 原因解析 MeshDevice/deviceAll && /wvp/device 测试结果&#xff1a;都使用 import com.gbcom.wvp.domain.vo.RS; 返…

C语言编程题_3D接雨水

接雨水的题目描述如下。 (1) 2D接雨水&#xff1a; 字节员工是不是个个都会接雨水 &#xff1b; (2) 3D接雨水&#xff1a; 407. 接雨水 II &#xff1b; (3) 3D接雨水&#xff1a; 字节人都会的 3D接雨水 。 问题描述 难度&#xff1a;困难 给你一个 m x n 的矩阵&#xff…

【历史版本火狐浏览器下载】

历史版本火狐浏览器下载 介绍 火狐浏览器是一款开源的互联网浏览器&#xff0c;由Mozilla基金会开发。它的历史版本可以追溯到2002年&#xff0c;以下是一些重要的历史版本介绍&#xff1a; Firefox 1.0&#xff08;2004年&#xff09;- 这是火狐浏览器的第一个正式版本&…

安装多个MySQL版本时如何连接到不同的数据库

当安装多个版本的数据库时&#xff0c;不同版本的端口名不一样&#xff0c;可以使用以下命令进行连接 mysql -uroot -p数据库密码 -h主机名 -P端口号 数据库主机名默认是localhost&#xff0c;端口号默认是3306&#xff0c;当安装多个版本数据库时&#xff0c;需要记住数据库的…

vim+xxd 编辑16进制

1. vim -b mib 2. 在vim 中执行 %!xxd, 这样就可以输入16进制&#xff1a; 3. 输入完成后&#xff0c;在vim中 执行 %!xxd -r 切换至原模式&#xff1b; 4. 保存退出即可 5. 重新打开mib文件&#xff1a;vim -b mib 6. 在vim 中执行 %!xxd, 查看是否符合预期&#xff1a;…

java 语法中的数据类型

Java有哪些数据类型&#xff1f; Java语言数据类型分为两种&#xff1a;基本数据类型和引用数据类型。 Java基本数据类型范围和默认值&#xff1a; 需要注意一下&#xff0c;对于布尔类型&#xff1a; 如果 boolean 是单独使用&#xff08;在编译之后使用 Java 虚拟机中的 int…

民航电子数据库:报错merge sql error, dbType null, druid-1.1.9, sql : xxx

目录 一、场景二、SQL三、报错信息四、排查五、原因六、解决 一、场景 1、对接民航电子数据库 2、limit查询时报错 二、SQL SELECT openid,headimgurl,nickname FROM t_mb_weixinuser WHERE openid? AND vdnId ? LIMIT 1三、报错信息 merge sql error, dbType null, dru…

一觉醒来 AI科技圈发生的大小事儿 04月24日

该日报由AI生成&#xff0c;制作方法联系 【微信:wenhaofree】 ⏩昆仑万维23年收入49亿净利润13亿&#xff0c;研发费用增长40%&#xff0c;坚定All in AGI与AIGC 昆仑万维发布2023年年度业绩报告&#xff0c;实现营业收入49.2亿元&#xff0c;净利润12.6亿元&#xff0c;同比…

学习Rust的第17天:Traits

Rust traits&#xff0c;包括自定义trait声明&#xff0c;trait边界&#xff0c;实现trait的返回类型&#xff0c;条件方法实现和blanket实现。Rust的多态性严重依赖于traits&#xff0c;这允许基于trait的分派和泛型编程。掌握traits使开发人员能够创建灵活的、可维护的代码&a…

Unity射线实现碰撞检测(不需要rigbody组件)

使用physic.CapsulCast&#xff08;&#xff09;&#xff1b; 前面3个参数生成一个胶囊体&#xff0c; 向着发射方向&#xff0c;发射出一串的胶囊&#xff08;没有最大距离&#xff09; 有最大距离&#xff0c;可以节约性能开销。 physic.CapsulCast&#xff08;&#xff0…

BUUCTF---misc---[ACTF新生赛2020]outguess

1、下载附件&#xff0c;解压之后得到下面信息 2、查看图片属性&#xff0c;发现有个核心价值观编码&#xff1b;解码为abc 3、flag.txt提示 4、结合题目&#xff0c;这是一个outguess隐写 5、用kali先下载安装隐写库 6、使用命令-k(密钥)&#xff1b;-r(将图片里面的隐写信息…

数据结构练习-线性表定义与基本操作

----------------------------------------------------------------------------------------------------------------------------- 1. 线性表是( )。 A.一个有限序列&#xff0c;可以为空 B. 一个有限序列&#xff0c;不可以为空 C. 一个无限序列&#xff0c;可以为空…

(SH) HS-PEG-Cy5.5/CY7/CY5 巯基聚乙二醇Cy5.5/Cy7/Cy5

(SH) HS-PEG-Cy5.5/CY7/CY5 巯基聚乙二醇Cy5.5/Cy7/Cy5 【中文名称】花菁染料Cy5.5-聚乙二醇-巯醇 【英文名称】Cy5.5-PEG-SH 【结 构 】 【品 牌】碳水科技&#xff08;Tanshtech&#xff09; 【纯 度】95%以上 【保 存】-20℃ 【规 格】5mg&#xff0c;10m…