微信小程序使用腾讯地图实现地点搜索并且随着地图的滑动加载滑动到区域的地点,本文地点使用医院关键词作为搜索地点

实现效果如下

1.页面加载时,根据getLocation方法获取用户当前经纬度获取20条医院位置信息

在这里插入图片描述

2.页面滑动时,根据滑动到的经纬度再次获取20条医院位置信息

在这里插入图片描述

获取到的医院位置信息

在这里插入图片描述

实现方法如下

1.在.wxml中添加触发滑动的方法bindregiοnchange=“onMapRegionChange”

<map id="map" class="map" scale="{{scale}}" markers="{{markers}}" latitude="{{lat}}" show-location longitude="{{lng}}" enable-satellite="{{mapChange}}" bindmarkertap="onMarkerTap" bindregionchange="onMapRegionChange">

2.在.js中

Page({
 data: {
   markers: [],  //覆盖物
   txKey: "你的腾讯地图key",  //腾讯地图key
   regionChanged: false     // 地图区域是否发生变化的标志
 },
 onLoad(options) {
    let that = this
    //获取用户当前位置
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        console.log('用户已授权位置权限,经纬度:' + res.longitude, res.latitude);
        that.setData({
          lat: res.latitude,
          lng: res.longitude
        })
        //调用地点搜索方法,把用户当前位置经纬度传递给该方法
        that.getHospitalLoacal(res.longitude,res.latitude)
     }
    })
 },
 //触发滑动方法
 onMapRegionChange: function (e) {
   if (e.type === 'end') {
     this.setData({
      regionChanged: false
    });
    //获取到滑动的经纬度,传递给该方法
    this.getHospitalLoacal(e.detail.centerLocation.longitude, e.detail.centerLocation.latitude);
   }
 },
 //地点搜索方法
 getHospitalLoacal(lng,lat){
 console.log("搜索医院···")
  // 使用腾讯地图API进行关键词搜索
  wx.request({
   url: 'https://apis.map.qq.com/ws/place/v1/search',
   data: {
     keyword: '医院',  // 搜索关键词为“医院”
     /**
      格式:
      boundary=nearby(lat,lng,radius[, auto_extend])
      子参数:
      lat,lng:搜索中心点的经纬度,格式顺序为纬度在前,经度在后
      radius:搜索半径,单位:米,取值范围:10到1000
      auto_extend:[可选] 当前范围无结果时,是否自动扩大范围,取值:
      0 不扩大
      1 [默认] 自动扩大范围(依次按照按1公里、2公里、5公里,
      最大到全城市范围搜索)
     */
     boundary: 'nearby('+lat+','+lng+',1000,1)',
     key: this.data.txKey,
     page_size: 20,//每页条目数,最大限制为20条,默认为10条
     page_index: 1 //第x页,默认第1页
  },
  success: res => {
    if (res.data.status === 0) {
      let hospitals = res.data.data.map(item => {
        return {
           id: item.id,
           longitude: item.location.lng,
           latitude: item.location.lat,
           title: item.title,
           iconPath: '/images/hospital.png', // 自定义标记的图标
           width: 30,
           height: 30
         };
       });

       this.setData({
         markers: hospitals
       });
     } else {
       console.error('地图API请求失败:', res.data.message);
     }
   },
   fail: error => {
     console.error('地图API请求失败:', error);
   }
  });
 }
})



如果本文对你有帮助,记得一键三连哦,你的支持和鼓励就是我最大的动力!^_^

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数组对象判重最佳实践

数组对象判重最佳实践 赶紧挣钱&#xff0c;回家过年… 1.问题回顾 deviceSelectedRow(row) {this.ElectricalPartList.push(row)}&#xff0c;在此方法中&#xff0c;ElectricalPartList需要多次push进去数据&#xff0c;但是row可能存在重复&#xff0c;如何判重呢&#xff…

thingsboard3.6的mailConfigTemplateController错误

1、bug内容 使用3.6版本的tb代码进行打包生成boot的jar包,在启动的时候会报错mailConfigTemplateController bean初始化找不到文件路径。 Error creating bean with name mailConfigTemplateController defined in URL [jar:file:/D:/yuxinwei/AE/thingsboard/thingsboard-3…

PMP对项目工程师有用吗?

一、什么是项目工程师&#xff1f; 项目工程师是指在各个领域负责技术操作、设计、管理以及评估能力的人员。他们通常担当项目的实施和执行角色&#xff0c;在开发或控制类项目中发挥重要作用。有时&#xff0c;项目工程师的称号还可以用来表示在某个领域取得专业资格的人员。…

前端js语音朗读文本

<!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>语音朗读</title></head><body>&l…

写出漂亮代码的45个小技巧

不知道大家有没有经历过维护一个已经离职的人的代码的痛苦&#xff0c;一个方法写老长&#xff0c;还有很多的if else &#xff0c;根本无法阅读&#xff0c;更不知道代码背后的含义&#xff0c;最重要的是没有人可以问&#xff0c;此时只能心里默默地问候这个留坑的兄弟。。 …

网络运维与网络安全 学习笔记2023.11.23

网络运维与网络安全 学习笔记 第二十四天 今日目标 VRRP负载均衡、BFD原理与配置、BFD典型应用 DHCP工作原理、全局模式DHCP VRRP负载均衡 VRRP单组缺陷 每网段存在一个VRRP组&#xff0c;缺点如下&#xff1a; 主网关数据转发压力大 备份网关不转发任何数据 网络设备利用…

【KMP算法】学习总结

说明&#xff1a; 文章内容为对KMP算法的总结&#xff0c;以及力扣例题&#xff1b;文章内容为个人的学习总结&#xff0c;如有错误&#xff0c;欢迎指正。 文章目录 1. KMP算法1.1 算法步骤1.2 关于指针回退问题 2 . LeetCode例题 1. KMP算法 1.1 算法步骤 KMP算法通常用于…

INFLOW:用于检测隐藏服务器的反向网络流水印

文章信息 论文题目&#xff1a;INFLOW: Inverse Network Flow Watermarking for Detecting Hidden Servers 期刊&#xff08;会议&#xff09;&#xff1a;IEEE INFOCOM 2018 - IEEE Conference on Computer Communications 级别&#xff1a;CCF A 文章链接&#xff1a;https:…

ajax请求方式处理

1、前置准备 1.1、SpringBoot项目下&#xff1a;写一个controller RestController public class TestController {RequestMapping("/yyy")public void test(HttpServletRequest request, HttpServletResponse response){String yang request.getParameter("y…

示波器探头讲解及案例分享

示波器探头讲解 示波器探头 分为X1、X10档&#xff1a; X1档&#xff0c;表示被测量的信号没有经过衰减进入示波器 X10档&#xff0c;表示被测量的信号衰减10倍进入示波器&#xff08;当示波器也设置为10X档&#xff0c;直接读数即可&#xff0c;但是当示波器设置为1X档&…

Java【XML 配置文件解析】

前言 最近考试周忙得要死&#xff0c;但我却不紧不慢&#xff0c;还有三天复习时间&#xff0c;考试科目几乎都还没学呢。今天更新一个算是工具类-XML文件的解析&#xff0c;感觉还是挺有用的&#xff0c;之后可以融进自己的项目里。 XML 配置文件解析 0、导入依赖 有点像我…

Spark---基于Standalone模式提交任务

Standalone模式两种提交任务方式 一、Standalone-client提交任务方式 1、提交命令 ./spark-submit --master spark://mynode1:7077 --class org.apache.spark.examples.SparkPi ../examples/jars/spark-examples_2.11-2.3.1.jar 100 或者 ./spark-submit --master spark…

Python爬取京东商品销售数据进行数据分析示例代码,以口红为例

文章目录 一、准备工作驱动安装模块使用与介绍 二、流程解析三、完整代码四、效果展示关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资…

idea手动导入maven包

当maven仓库中没有包时&#xff0c;我们需要手动导入jar到maven项目中 1.这里的maven设置成你自己安装的maven 2.查看pom.xml文件中maven&#xff0c;以下面为例 <dependency><groupId>com.jdd.pay</groupId><artifactId>mapi-sdk-v3</artifactId&…

数字人直播系统开发要注意的陷阱

数字人做为元宇宙的底层基座&#xff0c;BAT都在跑步进场&#xff0c;目前具有前瞻性的公司都在布局数字人产业。数字人可以应用于很多业务场景&#xff0c;对今年来说&#xff0c;无疑数字人直播系统是最火的。像去年数字人直播SAAS系统定制开发的话没有个百把万是下不来的。但…

Python教程73:Pandas中一维数组Series学习

创建一维数据类型Series dataNone 要转化为Series的数据(也可用dict直接设置行索引) 若是标量则必须设置索引,该值会重复,来匹配索引的长度 indexNone 设置行索引 dtypeNone 设置数据类型(使用numpy数据类型) nameNone 设置Series的name属性 copyFalse 不复制 (当data为ndarray…

云端导览,数字互动 | 拓世法宝AI数字人一体机助力全新旅游时代

《中国旅行消费趋势洞察白皮书&#xff08;2023版&#xff09;》显示&#xff0c;消费者旅行习惯已从“到此一游”变为“深度在地”&#xff0c;更强调在旅游中充实自我、学习新知识。 &#xff08;《中国旅行消费趋势洞察白皮书&#xff08;2023版》截图&#xff09; 从这些资…

Navicat 技术指引 | 适用于 GaussDB 的用户权限设置

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对 GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…

CSGO搬砖干货,全网最详细教学!

CSGO游戏搬砖全套操作流程及注意事项&#xff08;第一课&#xff09; 在电竞游戏中&#xff0c;CSGO&#xff08;Counter-Strike: Global Offensive&#xff09;被广大玩家誉为经典之作。然而&#xff0c;除了在游戏中展现个人实力和团队合作外&#xff0c;有些玩家还将CSGO作为…

C#winfrom端屏幕截图功能的简单实现(修改了屏幕的缩放比例后,截图功能异常,慎用!!!)

文章目录 1 主要文件1.1 FrmScreenShot.cs1.2 FrmScreenShot.Designer.cs1.1 Utility.cs 在发现有一款播放软件禁止截图功能后&#xff0c;使用了其他的截图工具发现都会被播放软件禁用掉截图功能&#xff0c;想了下试着自己做一个截图工具&#xff0c;也可以方便将截图工具添加…