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

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.hqwc.cn/news/630593.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV从入门到精通实战(五)——dnn加载深度学习模型

从指定路径读取图像文件、利用OpenCV进行图像处理&#xff0c;以及使用Caffe框架进行深度学习预测的过程。 下面是程序的主要步骤和对应的实现代码总结&#xff1a; 1. 导入必要的工具包和模型 程序开始先导入需要的库os、numpy、cv2&#xff0c;同时导入utils_paths模块&…

Hive进阶(4)----MapReduce的计算过程(赋图助君理解)

MapReduce的计算过程 MapReduce是一种编程模型和处理大规模数据集的方法。它通常用于分布式计算环境中&#xff0c;能够将数据处理任务分解成独立的部分&#xff0c;分配给多台计算机进行并行处理。这个模型由Google提出&#xff0c;并在开源领域中得到了广泛的应用和实现。Map…

风力发电自动化控制系统中的智能化技术应用研究

风力发电自动化控制系统中的智能化技术应用研究 随碳中和目标的提出和执行&#xff0c;风能发电作为新能源行业的核心部分&#xff0c;步入了它的黄金发展期。由于风能资源具有间歇性、随机性等特点&#xff0c;这给风电的高效利用带来了巨大挑战。为了增强风力发电系统的工作效…

pycharm永久改变sys.path

进入pycharm&#xff0c;选择file->settings->interpreter 在这里选择图中所示show all 再单击左上角减号右侧第三个&#xff0c;长得像思维导图的图标 之后添加你的路径&#xff0c;确认即可

STM32G431RBT6移植FreeRTOS

引言&#xff1a; 本文专门为参加了蓝桥杯嵌入式赛道的同学准备&#xff0c; 大家可能会有这样一个问题&#xff0c; 比完赛之后&#xff0c; 对于像继续使用STM32G431RBT6学习FreeRTOS的&#xff0c; 发现网上的教程使用的板子基本上都是F1和F4的&#xff0c; 其实呢&#xff…

【2024 SCI一区】 基于DCS-BiLSTM-Attention的多元回归预测(Matlab实现)

【2024 SCI一区】 基于DCS-BiLSTM-Attention的多元回归预测&#xff08;Matlab实现&#xff09; 目录 【2024 SCI一区】 基于DCS-BiLSTM-Attention的多元回归预测&#xff08;Matlab实现&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 差异创意搜索算法&…

STM32之不使用MicroLIB

一、microlib介绍 microlib 是缺省 C 库的备选库,功能上不具备某些 ISO C 特性。 microlib 进行了高度优化以使代码变得很小,功能比缺省 C 库少,用于必须在极少量内存环境下运行的深层嵌入式应用程序。 二、不使用microlib的原因 由于microlib不支持C++开发,因此在使用C…

【opencv】dnn示例-segmentation.cpp 通过深度学习模型对图像进行实时语义分割

模型下载地址&#xff1a; http://dl.caffe.berkeleyvision.org/ 配置文件下载&#xff1a; https://github.com/opencv/opencv_extra/tree/4.x/testdata/dnn 该段代码是一个利用深度学习进行语义分割的OpenCV应用实例。下面将详细解释代码的功能和方法。 引入库 引入了一些必要…

便携式网络音视频解码器JR-SMD201-P

详细介绍&#xff1a; JR-SMD201-P便携式网络解码器采用1/2U设计&#xff0c;支持AVS/H.265/H.264/MPEG2解码&#xff0c;支持IP输入&#xff0c;支持1080P/1080I/720P/576I/480I多种分辨率&#xff0c;支持DRA/AC3/EAC3/AAC/MPEG等音频。 产品特点 支持输入方式IP 接口丰富&a…

【算法刷题 | 回溯思想 07】4.18(全排列、全排列 ||)

文章目录 11.全排列11.1题目11.2解法&#xff1a;回溯11.2.1回溯思路&#xff08;1&#xff09;函数返回值以及参数&#xff08;2&#xff09;函数返回值&#xff08;3&#xff09;遍历过程 11.2.2代码实现 12.全排列 ||12.1题目12.2解法&#xff1a;回溯12.2.1回溯思路12.2.3代…

[Leetcode]用栈实现队列

用栈实现队列&#xff1a; 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并返回元…

硬件设备杂记——12G SDI及 AES67/EBU

常见的 SDI线缆规格&#xff0c;HD-SDI又被称为1.5G-SDI&#xff0c;具体参数以秋叶原的参数为例 AES67/EBU 目前音频网络标准主要集中在OSI网络体系的第二层和第三层。 第二层音频标准的弊端在于构建音频网络时需要专用的交换机&#xff0c;无法利用现有的以太网络&#xff0c…