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

实现效果如下

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",  //腾讯地图keyregionChanged: 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到1000auto_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);}});}
})



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

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

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

相关文章

【Spring集成MyBatis】核心配置文件

文章目录 1. typeHandlers标签2. plugins标签通过PageHelper的API获取分页的信息 1. typeHandlers标签 可以重写类型处理器&#xff0c;或创建类型处理器来处理不支持/非标准的类型。选择性地将它映射到一个JDBC类型&#xff1a;如Java中的Date类型&#xff0c;将其存放到数据…

docker安装以及idea访问docker

其他目录&#xff1a; docker 安装环境&#xff08;有空更新&#xff09; url “” docker 打包java包&#xff0c;并运行&#xff08;有空更新&#xff09; url “” docker 打包vue &#xff08;有空更新&#xff09; url “” docker 多服务 &#xff08;有空更新&#xff…

2023年亚太杯数学建模A题水果采摘机器人的图像识别功能(matlab 部分代码)

对于1-4问针对的是附录1 中的数据 clc; close all; clear; % 图像文件夹路径 folder_path E:/新建文件夹/yatai/Attachment/Attachment 1/; % 图像文件列表 image_files dir(fullfile(folder_path, *.jpg)); % 假设所有图片都是jpg格式% 解析文件名中的数字&#xff0c;并转…

机器学习探索计划——数据集划分

文章目录 导包手写数据划分函数使用sklearn内置的划分数据函数stratifyy理解举例 导包 import numpy as np from matplotlib import pyplot as plt from sklearn.datasets import make_blobs手写数据划分函数 x, y make_blobs(n_samples 300,n_features 2,centers 3,clus…

Java设计模式系列:单例设计模式

Java设计模式系列&#xff1a;单例设计模式 介绍 所谓类的单例设计模式&#xff0c;就是采取一定的方法保证在整个的软件系统中&#xff0c;对某个类只能存在一个对象实例&#xff0c;并且该类只提供一个取得其对象实例的方法&#xff08;静态方法&#xff09; 比如 Hiberna…

leetcode:495. 提莫攻击

一、题目 链接&#xff1a;495. 提莫攻击 - 力扣&#xff08;LeetCode&#xff09; 函数原型&#xff1a;int findPoisonedDuration(int* timeSeries, int timeSeriesSize, int duration) 二、思路 遍历数组timeSeries&#xff0c;如果 元素值duration < 下一元素值 &#x…

OpenCV快速入门:图像分析——傅里叶变换、积分图像

文章目录 前言一、傅里叶变换1.1 离散傅里叶变换1.1.1 离散傅里叶变换原理1.1.2 离散傅里叶变换公式1.1.3 代码实现1.1.4 cv2.dft 函数解析 1.2 傅里叶变换进行卷积1.2.1 傅里叶变换卷积原理1.2.2 傅里叶变换卷积公式1.2.3 代码实现1.2.4 cv2.mulSpectrums 函数解析 1.3 离散余…

基于深度学习的文本分类

通过构建更复杂的深度学习模型可以提高分类的准确性&#xff0c;即分别基于TextCNN、TextRNN和TextRCNN三种算法实现中文文本分类。 项目地址&#xff1a;zz-zik/NLP-Application-and-Practice: 本项目将《自然语言处理与应用实战》原书中代码进行了实现&#xff0c;并在此基础…

Unity使用DOTween实现分段进度条

文章目录 需求下载安装 DOTween实现实现效果 需求 用组件进度条&#xff08;Slider&#xff09;&#xff0c;利用分段加载进行以假乱真的进度效果&#xff0c;比如说2秒钟到达20%的进度&#xff0c;10秒钟加载20%到50%进度&#xff0c;1分钟加载50%到90%的进度&#xff0c;30秒…

2023年金融信创行业研究报告

第一章 行业概况 1.1 定义 金融信创是指在金融行业中应用的信息技术&#xff0c;特别是那些涉及到金融IT基础设施、基础软件、应用软件和信息安全等方面的技术和产品。这一概念源于更广泛的“信创 (信息技术应用创新)”&#xff0c;即通过中国国产信息技术替换海外信息技术&a…

ELK企业级日志分析平台——logstash

部署 新建一台虚拟机elk4部署logstash [rootelk4 ~]# yum install -y jdk-11.0.15_linux-x64_bin.rpm[rootelk4 ~]# yum install -y logstash-7.6.1.rpm 命令方式 [rootelk4 bin]# /usr/share/logstash/bin/logstash -e input { stdin { } } output { stdout {} } elasticsearc…

使用骨传导耳机会伤耳朵吗?一文读懂骨传导耳机有哪些优点

首先说明&#xff0c;如果是正确的使用骨传导耳机是不会伤耳朵。 一、骨传导耳机的传声原理是什么&#xff1f; 声音的传播需要介质&#xff0c;传统的耳机是通过空气来进行传播&#xff0c;也被称为“空气传导耳机”&#xff0c;而骨传导耳机最大的特别之处就在于&#xff0…

DFS序和欧拉序的降维打击

1. DFS 序和时间戳 1.1 DFS 序 定义&#xff1a;树的每一个节点在深度优先遍历中进、出栈的时间序列。 如下树的 dfs 序就是[1,2,8,8,5,5,2,4,3,9,9,3,6,6,4,7,7,1]。 下图为生成DFS的过程。对于一棵树进行DFS序&#xff0c;除了进入当前节点时对此节点进行记录&#xff0c;…

多线程Thread(初阶二:Thread类及常⻅⽅法)

目录 一、Thread 的常⻅构造⽅法 继承Thread代码&#xff1a; 实现Runnable接口代码: 二、Thread 的⼏个常⻅属性 1、id&#xff1a; 2、获取线程的名字。 3、进程的状态&#xff1a; 4、在java中设置的优先级&#xff0c; 5、是否后台线程&#xff0c; 6、是否存活&a…

ubuntu22.04 arrch64版在线安装node

脚本 #安装node#下载node、npm国内镜像&#xff08;推荐&#xff09;# 判断是否安装了nodeif type -p node; thenecho "node has been installed."elsemkdir -p /home/zenglg cd /home/zenglgwget https://registry.npmmirror.com/-/binary/node/v10.14.1/node-v10.…

Linux系统编程 day04 文件和目录操作

Linux系统编程 day04 文件和目录操作 1. 文件IO1.1 open 函数1.2 close函数1.3 read函数1.4 write函数1.5 lseek函数1.6 errno变量1.7 文件示例1 读写文件1.8 文件示例2 文件大小的计算1.9 文件示例3 扩展文件大小1.10 文件示例4 perror函数的使用1.11 阻塞与非阻塞的测试 2. 文…

关于「光学神经网络」的一切:理论、应用与发展

/目录/ 一、线性运算的光学实现 1.1. 光学矩阵乘法器 1.2. 光的衍射实现线性运行 1.3. 基于Rayleigh-Sommerfeld方程的实现方法 1.4. 基于傅立叶变换的实现 1.5. 通过光干涉实现线性操作 1.6. 光的散射实现线性运行 1.7. 波分复用&#xff08;WDM&#xff09;实现线性运…

脉冲幅度调制信号的功率谱计算

本篇文章是博主在通信等领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对人工智能等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅解。文章分类在通信领域笔记&#xf…

风口下的危与机:如何抓住生成式AI黄金发展期?

回顾AI的发展历程&#xff0c;我们见证过几次重大突破&#xff0c;比如2012年ImageNet大赛的图像识别&#xff0c;2016年AlphaGo与李世石的围棋对决&#xff0c;这些进展都为AI的普及应用铺设了道路。而ChatGPT的出现&#xff0c;真正让AI作为一个通用的产品&#xff0c;走入大…

Linux | 创建 | 删除 | 查看 | 基本命名详解

Linux | 创建 | 删除 | 查看 | 基本命名详解 文章目录 Linux | 创建 | 删除 | 查看 | 基本命名详解前言一、安装Linux1.1 方法一&#xff1a;云服务器方式1.2 方法二&#xff1a;虚拟机方式 二、ls2.2 ll 三、which3.1 ls -ld 四、pwd五、cd5.1 cd .\.5.2 ls -al5.3 重新认识命…