uni微信小程序 map 添加padding

问题背景:

规划驾车线路的时候,使用uni的include-points指定可视范围的时候,会很极限。导致marker不能完全显示。
在这里插入图片描述

解决方法

  1. 给地图显示范围添加padding (推荐)
 <map
        id="myMap"
        :markers="markers"
        :polyline="polyline"
        :longitude="curLongitude"
        :latitude="curLatitude"
        @markertap="markertap"
 ></map>
onLoad((e) => {
 uni.createMapContext('myMap', this).includePoints({
      padding: [120, 110, 120, 110],
      points: [
        { latitude: startCityLat.value, longitude: startCityLog.value },
        { latitude: endCityLat.value, longitude: endCityLog.value }
      ]
    });
});
  1. 或者获取并修改缩放地图(记得设置中心点)
const appMapRef = ref('');
appMapRef.value = uni.createMapContext('myMap');
appMapRef.value.getScale({
    success: (res) => {
      console.log('缩放', res);
      mapScale.value = res.scale - 1;
      console.log('mapScale.value', mapScale.value);
    }
  });

uni文档:点击这里

1的效果图:
在这里插入图片描述

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

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

相关文章

【LeetCode:1410. HTML 实体解析器 | 模拟+哈希表+字符串+库函数】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

设计模式—开闭原则

1.背景 伯特兰迈耶一般被认为是最早提出开闭原则这一术语的人&#xff0c;在他1988年发行的《面向对象软件构造》中给出。这一想法认为一旦完成&#xff0c;一个类的实现只应该因错误而修改&#xff0c;新的或者改变的特性应该通过新建不同的类实现。新建的类可以通过继承的方…

Spring Cloud 版本升级遇坑记:OpenFeignClient与Gateway的恩怨情仇

Spring Cloud 版本升级遇坑记&#xff1a;OpenFeignClient与Gateway的恩怨情仇 近日&#xff0c;在对项目中的 Spring Boot、Spring Cloud 以及 Spring Cloud Alibaba 进行版本升级时&#xff0c;遭遇了一个令人头疼的问题&#xff1a;Spring Cloud Gateway 在运行时一直卡住&a…

Python web自动化测试 —— 文件上传

​文件上传三种方式&#xff1a; &#xff08;一&#xff09;查看元素标签&#xff0c;如果是input&#xff0c;则可以参照文本框输入的形式进行文件上传 方法&#xff1a;和用户输入是一样的&#xff0c;使用send_keys 步骤&#xff1a;1、找到定位元素&#xff0c;2&#…

CV计算机视觉每日开源代码Paper with code速览-2023.11.20

点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【人脸识别】FRCSyn Challenge at WACV 2024:Face Recognition Challenge in the Era of Synthetic Data 论文地址&#xff1a;https://arxi…

centos系统下,docker安装sqlserver并用本地Navicat连接

文章目录 一&#xff0c;centos下安装docker二&#xff0c;docker安装sqlserver20192.1 安装遇到的问题2.1.1 修改用户名进不去数据库2.1.2 安装2022版的sqlserver发现启动失败 三&#xff0c;Navicat连接centos下的sqlserver3.1 下载ODBC Driver 参考微软网址&#xff1a; 使…

SUSE 15.2升级Openssh9.5

SUSE 15.2升级Openssh9.5 公司有部分SAP的机器用的SUSE,懒得弄rpm包了.直接编译安装 1. 添加阿里云源 zypper addrepo -f http://mirrors.aliyun.com/opensuse/distribution/leap/15.2/repo/oss/ openSUSE-15.2-Oss zypper addrepo -f http://mirrors.aliyun.com/opensuse/d…

Vatee万腾科技新高峰:Vatee前瞻性创新的数字化之力

Vatee万腾科技&#xff0c;一家以前瞻性创新为核心驱动力的数字化引领者&#xff0c;正迈向新的高峰。其在科技领域的卓越表现不仅体现在技术实力上&#xff0c;更展现在对未来的深刻洞察和独到思考上。 在Vatee的科技舞台上&#xff0c;前瞻性创新如一道独特的光芒&#xff0c…

Visual Components软件典型功能描述 衡祖仿真

1、即点即用&#xff0c;即插即用 vc提供大量的组件模块&#xff0c;组件都已经赋子行为和渲染&#xff0c;看起来复杂的模拟场景,可以通过简单拖拉组合&#xff0c;即可成为一条运动的仿真。节省更多的时间&#xff0c;让布局更灵动。 2、PLC功能 过去&#xff0c;PLC程序的…

视频服务网关的三大部署(三)

视频网关是软硬一体的一款产品&#xff0c;可提供多协议&#xff08;RTSP/ONVIF/GB28181/海康ISUP/EHOME/大华、海康SDK等&#xff09;的设备视频接入、采集、处理、存储和分发等服务&#xff0c; 配合视频网关云管理平台&#xff0c;可广泛应用于安防监控、智能检测、智慧园区…

2023年面试测试工程师一般问什么问题?

面试和项目一起&#xff0c;是自学路上的两大拦路虎。面试测试工程师一般会被问什么问题&#xff0c;总结下来一般是下面这4类&#xff1a; 1.做好自我介绍 2.项目相关问题 3.技术相关问题 4.人事相关问题 接下来&#xff0c;主要从以上四个方向分别展开介绍。为了让大家更有获…

现货黄金区间交易的两个要点

在现货黄金市场中&#xff0c;我们常碰到横盘区间行情。有区间&#xff0c;就终究会出现突破&#xff0c;因为金价不可能缺乏方向而一直在区间内运行。那既然要突破&#xff0c;我们又应当如何应对和交易呢&#xff1f;下面我们就来讨论一下。 切忌在突破发生时马上跟随突破方向…

[HCIE] IPSec-VPN (手工模式)

概念&#xff1a; A. IPSec&#xff1a;是对IP的安全性补充&#xff0c;工作在IP层&#xff0c;为IP网络通信提供安全服务。 B.安全联盟SA&#xff1a;是通信对等体之间对某些要素的协定。 C. IPSec安全联盟简称 IPSec SA.通常成对建立&#xff08;inbound和outbound&#x…

vue怎么实现国际化? vue-i18n 插件实现国际化,支持切换不同语言

依赖的文档开始 | Vue I18n 一、安装 npm install vue-i18n 如果在一个模块系统中使用它&#xff0c;你必须通过 Vue.use() 明确地安装 vue-i18n&#xff1a; import Vue from vue import VueI18n from vue-i18nVue.use(VueI18n)二、使用 在 src 下创建 lang 文件夹 1.准…

探索移动端可能性:Capacitor5.5.1和vue2在Android studio中精细融合

介绍&#xff1a; 移动应用开发是日益复杂的任务&#xff0c;本文将带领您深入探索如何无缝集成Capacitor5.5.1、Vue2和Android Studio&#xff0c;以加速您的开发流程Capacitor 是一个用于构建跨平台移动应用程序的开源框架。Vue 是一个流行的 JavaScript 框架&#xff0c;用…

销售管理系统怎么选择?

销售管理系统能够帮助企业更好的了解客户、洞察市场趋势是企业管理中常见的工具&#xff0c;如何选择销售管理系统&#xff1f;可以考察销售管理系统功能是否完整、稳定性以及CRM系统是否易上手。 1.功能是否完整 功能完整是销售管理系统的首要条件&#xff0c;例如缺少营销自…

虚幻学习笔记—给UI添加动画

一、前言 本文所使用的虚幻版本为5.3.2&#xff0c;之前工作都是用unity&#xff0c;做这类效果用的最多的是一个DoTween的插件&#xff0c;在虚幻中都内置集成了这这种效果制作。 图1.1 UI动画 二、过程 1、首先&#xff0c;在诸如按钮、图像等可交互控件中选中&#xff0c;如…

【开源】基于Vue.js的城市桥梁道路管理系统的设计和实现

项目编号&#xff1a; S 025 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S025&#xff0c;文末获取源码。} 项目编号&#xff1a;S025&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询城市桥…

单片DC-DC变换集成电路芯片B34063,可兼容型号MC34063A。工作电压范围宽。静态电流小,具有输出电流限制功能输出电流保护功能

B34063为一单片DC-DC变换集成电路&#xff0c;内含温度补偿的参考电压源(1.25V)、比较器、能有效限制电流及控制工作周期的振荡器,驱动器及大电流输出开关管等&#xff0c;外配少量元件&#xff0c;就能组成升压、降压及电压反转型DC-DC变换器。 主要特点&#xff1a; ● 工作…

web前端开发基础------外边距折叠现象

引言 在设置样式时&#xff0c;需要遵循先整体再细节&#xff0c;先通用样式再特殊样式的顺序进行设置 一&#xff0c;什么是外边距折叠现象呢&#xff1f; 外边距折叠 定义&#xff1a; 外边距折叠是指相邻的两个或者多个外边距&#xff08;margin&#xff09;在垂直方向会合并…