当前位置: 首页 > news >正文

微信小程序map组件所有markers展示在视野范围内

 注意:使用include-points属性不生效,要通过createMapContext实现

<template><view class="map-box"><map id="map" class="map" :markers="markers" :enable-traffic="true" :enable-poi="true"></map><view class="bottom"><view @click="choose" style="text-align: center;">选择位置</view></view></view>
</template><script>export default {name: "ty-wx-map",data() {return {markers: [{id: 1,callout: {content: '北湖湿地',padding: 10,borderRadius: 2,display: 'ALWAYS'},latitude: 43.983281,longitude: 125.368689,iconPath: '../../static/Marker1_Activated@3x.png',width: '68rpx',height: '68rpx',rotate: 0,alpha: 1}, {id: 2,callout: {content: '南溪湿地',padding: 10,borderRadius: 2,display: 'ALWAYS'},latitude: 43.810332,longitude: 125.354891,iconPath: '../../static/Marker1_Activated@3x.png',width: '68rpx',height: '68rpx',rotate: 0,alpha: 1}, {id: 3,callout: {content: '西湖公园',padding: 10,borderRadius: 2,display: 'ALWAYS'},latitude: 43.873167,longitude: 125.162295,iconPath: '../../static/Marker1_Activated@3x.png',width: '68rpx',height: '68rpx',rotate: 0,alpha: 1}]};},mounted() {this.setMap()},methods: {choose() {const that = thisuni.chooseLocation({success: function(res) {console.log('位置名称:' + res.name);console.log('详细地址:' + res.address);console.log('纬度:' + res.latitude);console.log('经度:' + res.longitude);that.markers.push({id: that.markers.length + 1,callout: {content: res.name,padding: 10,borderRadius: 2,display: 'ALWAYS'},latitude: res.latitude,longitude: res.longitude,iconPath: '../../static/Marker1_Activated@3x.png',width: '68rpx',height: '68rpx',rotate: 0,alpha: 1})that.setMap()}});},setMap() {const mapCtx = wx.createMapContext('map', this);mapCtx.includePoints({points: this.markers,padding: [36, 36, 10, 36]})}}}
</script><style scoped lang="scss">.map-box {position: absolute;width: 100%;z-index: 1;background-color: #fff;.map {width: 100%;height: 60vh;position: fixed;}.bottom {position: relative;z-index: 2;margin-top: calc(60vh - 24rpx);width: 100%;background-color: #fff;border-radius: 24rpx 24rpx 0 0;padding-bottom: env(safe-area-inset-bottom);}}
</style>

展示效果

点击选择位置,会把新选择的位置追加到地图markers并显示在视野范围内

相关文章:

微信小程序map组件所有markers展示在视野范围内

注意&#xff1a;使用include-points属性不生效&#xff0c;要通过createMapContext实现 <template><view class"map-box"><map id"map" class"map" :markers"markers" :enable-traffic"true" :enable-poi&…...

深度解析 tanh ⁡ tanh 激活函数

1. 引言 在现代深度学习中&#xff0c;激活函数&#xff08;Activation Function&#xff09;是神经网络的核心组件之一。它的主要作用是引入非线性&#xff0c;从而使神经网络能够学习和表示复杂的非线性关系。如果没有激活函数&#xff0c;神经网络的输出将只是输入的线性组…...

嵌入式入门Day38

C Day1 第一个C程序C中的输入输出输出操作coutcin练习 命名空间使用方法自定义命名空间冲突问题 C对字符串的扩充C风格字符串的使用定义以及初始化C风格字符串与C风格字符串的转换C风格的字符串的关系运算常用的成员变量输入方法 布尔类型C对堆区空间使用的扩充作业 第一个C程序…...

探索Rancher服务发现机制:容器世界的“导航仪”

《探索Rancher服务发现机制&#xff1a;容器世界的“导航仪”》 在当今容器化技术蓬勃发展的时代&#xff0c;容器的大规模部署和微服务架构的广泛应用使得服务之间的相互发现与通信变得至关重要。Rancher作为一款功能强大的容器管理平台&#xff0c;其服务发现机制宛如一座无…...

【ROS2】Qt事件循环和ROS2订阅机制一起使用有什么注意事项?

1、简述 Qt的事件循环和ROS订阅回调函数都可能在阻塞函数中运行, 例如:Qt的QApplication::exec() 和 ROS的rclcpp::spin() 两个阻塞函数不能在同一个线程中使用,如果使用不当,会造成Qt不处理事件或者ROS2不处理订阅的回调函数。 2、多线程 一般 QApplication::exec() 运…...

donet (MVC)webAPI 的接受json 的操作

直接用对象来进行接收&#xff0c;这个方法还不错的。 public class BangdingWeiguiJiluController : ApiController{/// <summary>/// Json数据录入错误信息/// </summary>/// <param name"WeiguiInfos"></param>/// <returns></r…...

Qt 界面外观

一、前言 1、 一个完善的应用程序&#xff0c;不仅应该有实用的功能&#xff0c;还要有一个漂亮的外观&#xff0c;这样才能使应用程序更加友好&#xff0c;更加吸引用户。 2、 作为一个跨平台的UI开发框架&#xff0c;Qt提供了强大而灵活的界面外观设计机制。 3、 本篇会讲解&…...

aws(学习笔记第二十二课) 复杂的lambda应用程序(python zip打包)

aws(学习笔记第二十二课) 开发复杂的lambda应用程序(python的zip包) 学习内容&#xff1a; 练习使用CloudShell开发复杂lambda应用程序(python) 1. 练习使用CloudShell CloudShell使用背景 复杂的python的lambda程序会有许多依赖的包&#xff0c;如果不提前准备好这些python的…...

HTML课堂之搜索工具箱/讲师duluo

目录&#xff1a; 源码在最后 小提示&#xff1a; 1.养成打卡习惯没日多加练习即可提什能力 2.源码在最后&#xff0c;请先看完代码讲解&#xff0c;在尝试自己写&#xff0c;这样容易掌握 3.请勿复制粘贴&#xff0c;因为你没掌握&#xff0c;即使复制粘贴也学不会 课堂重点笔…...

当歌 - RSS 订阅分发平台开发

以下将详细介绍当歌平台的技术架构、功能实现以及相关代码逻辑。 一、项目概述 当歌是一个极简的 RSS 订阅分发平台&#xff0c;旨在为用户提供便捷的 RSS 管理和订阅服务&#xff0c;帮助用户轻松获取和分享最新资讯。 二、技术架构 后端语言&#xff1a;PHP 数据库&#…...

学习threejs,导入wrl格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.VRMLLoader wrl模型加…...

使用GitLab+Jenkins搭建CICD执行环境

使用GitLabJenkins搭建CI\CD执行环境 前言什么是DevOps&#xff1f;什么是CI/CD&#xff1f;使用GitLabJenkins搭建CI\CD执行环境GitLab安装1. 安装和配置所需的依赖2. 下载并安装极狐GitLab3. 登录极狐GitLab 实例4.常用gitlab指令5.修改密码 Jenkins安装1.Jenkins 的主要特点…...

使用vue-pdf预览pdf和解决pdf电子签章显示问题

使用vue-pdf预览pdf和解决pdf电子签章显示问题 第一步&#xff1a;npm install vue-pdf 第二步页面使用vue-pdf <template><div class"pdf1"><Pdf v-for"i in numPages" :key"i" :src"src" :page"i" />…...

【Rust自学】11.3. 自定义错误信息

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.3.1. 添加错误信息 在 11.2. 断言(Assert) 中我们学习了assert!、assert_eq!和assert_ne!这三个宏&#xff0c;而这篇文章讲的就是它…...

05、Docker学习,常用安装:Mysql、Redis、Nginx、Nacos

Docker学习&#xff0c;常用安装&#xff1a;Mysql、Redis、Nginx、Nacos 一、Docker安装Mysql 1、docker search mysql ##查找mysql版本都有哪些 2、docker pull mysql:5.6 ##下载5.6版本的mysql镜像 3、docker run -p 13306:3306 --name mysql ##运行…...

RabbitMQ高级篇之MQ可靠性 数据持久化

文章目录 消息丢失的原因分析内存存储的缺陷如何确保 RabbitMQ 的消息可靠性&#xff1f;数据持久化的三个方面持久化对性能的影响持久化实验验证性能对比Spring AMQP 默认持久化总结 消息丢失的原因分析 RabbitMQ 默认使用内存存储消息&#xff0c;但这种方式带来了两个主要问…...

leetcode 2274. 不含特殊楼层的最大连续楼层数 中等

Alice 管理着一家公司&#xff0c;并租用大楼的部分楼层作为办公空间。Alice 决定将一些楼层作为 特殊楼层 &#xff0c;仅用于放松。 给你两个整数 bottom 和 top &#xff0c;表示 Alice 租用了从 bottom 到 top&#xff08;含 bottom 和 top 在内&#xff09;的所有楼层。另…...

Tauri教程-基础篇-第二节 Tauri的核心概念上篇

“如果结果不如你所愿&#xff0c;就在尘埃落定前奋力一搏。”——《夏目友人帐》 “有些事不是看到了希望才去坚持&#xff0c;而是因为坚持才会看到希望。”——《十宗罪》 “维持现状意味着空耗你的努力和生命。”——纪伯伦 Tauri 技术教程 * 第四章 Tauri的基础教程 第二节…...

大风车excel:怎么把题库导入excel?题库导入excel

高效管理试题库&#xff1a;如何批量导入试题到 Excel&#xff1f; 在教育培训、学校管理以及在线学习平台中&#xff0c;试题库的管理是核心工作之一。如何快速、准确地将试题导入到 Excel 表格中&#xff0c;成为许多教育工作者和开发者的迫切需求。本文将围绕“题库导入 Ex…...

Java 兼容读取WPS和Office图片,结合EasyExcel读取单元格信息

在Java开发中&#xff0c;处理Excel文件中的图片&#xff08;包括浮动图片和嵌入图片&#xff09;是一个常见的需求。本文将介绍如何使用EasyExcel和Apache POI库来读取Excel文件中的图片&#xff0c;并将其与数据进行关联。 1. 引言 在许多应用场景中&#xff0c;Excel文件不…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...