微信小程序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 = this
				uni.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并显示在视野范围内

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

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

相关文章

PLC实现HTTP协议JSON格式数据上报对接的参数配置说明

IGT-SER系列PLC通讯智能网关支持HTTP协议GET和POST、PUT请求模式。支持JSON格式的文件&#xff0c;也可以实现WebService的调用。 通常智能网关是HTTP协议的客户端&#xff0c;也可以同时作为HTTP的服务端。相关案例 作为客户端时支持触发、周期、混合等多种工…

微信小程序——创建滑动颜色条

在微信小程序中&#xff0c;你可以使用 slider 组件来创建一个颜色滑动条。以下是一个简单的示例&#xff0c;展示了如何实现一个颜色滑动条&#xff0c;该滑动条会根据滑动位置改变背景颜色。 步骤一&#xff1a;创建小程序项目 首先&#xff0c;使用微信开发者工具创建一个新…

Improving Language Understanding by Generative Pre-Training GPT-1详细讲解

Improving Language Understanding by Generative Pre-Training 2018.06 GPT-1 0.有监督、半监督、无监督 CV&#xff1a;ImageNet pre-trained model NLP&#xff1a;pre-trained model? 在计算机视觉中任务包含分类、检测、分割&#xff0c;任务类别数少&#xff0c;对应…

sql server cdc漏扫数据

SQL Server的CDC指的是“变更数据捕获”&#xff08;Change Data Capture&#xff09;。这是SQL Server数据库提供的一项功能&#xff0c;能够跟踪并记录对数据库表中数据所做的更改。这些更改包括插入、更新和删除操作。CDC可以捕获这些变更的详细信息&#xff0c;并使这些信息…

如何在 Ubuntu 22.04 上安装 Caddy Web 服务器教程

简介 Caddy 是一个开源的 Web 服务器&#xff0c;它支持静态和现代 Web 应用程序&#xff0c;使用预定义的配置规则&#xff0c;并为所有链接的域名自动启用 HTTPS。Caddy 使用 GO 语言编写&#xff0c;提供了用户友好的配置指令&#xff0c;使你既可以将其用作 Web 服务器&am…

《机器学习》——贝叶斯算法

贝叶斯简介 贝叶斯公式&#xff0c;又称贝叶斯定理、贝叶斯法则&#xff0c;最初是用来描述两个事件的条件概率间的关系的公式&#xff0c;后来被人们发现具有很深刻的实际意义和应用价值。该公式的实际内涵是&#xff0c;支持某项属性的事件发生得愈多&#xff0c;则该属性成…

边缘计算网关在机床设备数据采集中的应用

边缘计算网关是连接边缘设备和云端的一个中间节点&#xff0c;负责在边缘设备和云服务器之间进行数据传输和处理。它具备数据采集、数据处理、协议转换、数据存储、安全功能及远程管理等多种能力&#xff0c;是边缘计算系统中不可或缺的关键设备。 一、功能与优势 数据采集&a…

腾讯二面:MySQL的半同步是什么?不是MySQL的两阶段提交,那是什么?

前言 年后在进行腾讯二面的时候&#xff0c;写完算法的后问的第一个问题就是&#xff0c;MySQL的半同步是什么&#xff1f;我当时直接懵了&#xff0c;我以为是问的MySQL的两阶段提交的问题呢&#xff1f;结果确认了一下后不是两阶段提交&#xff0c;然后面试官看我连问的是啥都…

云计算基础,虚拟化原理

文章目录 一、虚拟化1.1 什么是虚拟化1.2 虚拟化类型 二 、存储虚拟化2.1 存储指标2.2 存储类型2.3 存储协议2.4 RAID 三、内存 i/O虚拟化3.1 内存虚拟化基本概念地址空间转换原理内存共享与隔离原理 3.2 I/O 虚拟化基本概念模拟&#xff08;Emulation&#xff09;方式半虚拟化…

【网络协议】IPv4 地址分配 - 第二部分

前言 在第 1 部分中&#xff0c;我们学习了 IPv4 地址的分配方式&#xff0c;了解了各种类型的 IPv4 地址&#xff0c;并进行了基础的子网划分&#xff08;Subnetting&#xff09;。在第 2 部分中&#xff0c;我们将继续学习子网划分&#xff0c;并引入一些新的概念。 【网络…

JAVA 使用apache poi实现EXCEL文件的输出;apache poi实现标题行的第一个字符为红色;EXCEL设置某几个字符为别的颜色

设置输出文件的列宽&#xff0c;防止文件过于丑陋 Sheet sheet workbook.createSheet(FileConstants.ERROR_FILE_SHEET_NAME); sheet.setColumnWidth(0, 40 * 256); sheet.setColumnWidth(1, 20 * 256); sheet.setColumnWidth(2, 20 * 256); sheet.setColumnWidth(3, 20 * 25…

Cursor 实战技巧:好用的提示词插件Cursor Rules

你好啊&#xff0c;见字如面。感谢阅读&#xff0c;期待我们下一次的相遇。 最近在小红书发现了有人分享这款Cursor提示词的插件&#xff0c;下面给各位分享下使用教程。简单来说Cursor Rules就是可以为每一个我们自己的项目去配置一个系统级别的提示词&#xff0c;这样在我们…

【简博士统计学习方法】第1章:3. 统计学习方法的三要素

3. 统计学习方法的三要素 3.1 监督学习的三要素 3.1.1 模型 假设空间&#xff08;Hypothesis Space&#xff09;&#xff1a;所有可能的条件概率分布或决策函数&#xff0c;用 F \mathcal{F} F表示。 若定义为决策函数的集合&#xff1a; F { f ∣ Y f ( X ) } \mathcal{F…

60.在 Vue 3 中使用 OpenLayers 绘制自由线段、自由多边形

前言 在现代 Web 开发中&#xff0c;地图功能已经成为许多应用的重要组成部分。OpenLayers 是一个强大的开源地图库&#xff0c;支持多种地图源和地图操作。结合 Vue 3 的响应式特性&#xff0c;我们可以轻松实现地图的交互功能。本文将详细介绍如何在 Vue 3 中使用 OpenLayer…

krpano 实现文字热点中的三角形和竖杆

krpano 实现文字热点中的三角形和竖杆 实现文字热点中的三角形和竖杆 一个后端写前端真的是脑阔疼 一个后端写前端真的是脑阔疼 一个后端写前端真的是脑阔疼 实现文字热点中的三角形和竖杆 上图看效果 v&#xff1a;2549789059

【算法】字符串算法技巧系列

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 引入&#xff1a;字符串相关算法技巧 1&#xff1a;字符串转数组 2&#xff1a;子字符串 3&#xff…

Linux x86_64 程序静态链接之重定位

文章目录 一、简介二、链接器2.1 简介2.2 可重定位目标模块2.3 符号解析2.4 重定位 三、重定位 demo 演示3.1 外部函数重定位3.2 static 函数重定位 四、补充参考链接 一、简介 编程的代码无非是由函数和各种变量&#xff0c;以及对这些变量的读、写所组成&#xff0c;而不管是…

【OJ刷题】同向双指针问题

这里是阿川的博客&#xff0c;祝您变得更强 ✨ 个人主页&#xff1a;在线OJ的阿川 &#x1f496;文章专栏&#xff1a;OJ刷题入门到进阶 &#x1f30f;代码仓库&#xff1a; 写在开头 现在您看到的是我的结论或想法&#xff0c;但在这背后凝结了大量的思考、经验和讨论 目录 1…

ImportError: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32‘ not found

问题描述&#xff1a;安装MMYOLO或者MMROTATE时&#xff0c;出现的问题&#xff1a; (base) rootautodl-container-78fc438fda-4132d99a:~/autodl-tmp/MMROTATE_PROJECT/mmrotate-1.x# python demo/image_demo.py demo/demo.jpg oriented-rcnn-le90_r50_fpn_1x_dota.py orient…

微信小程序防止重复点击事件

直接写在app.wpy里面&#xff0c;全局可以调用 // 防止重复点击事件preventActive(fn) {const self this;if (this.globalData.PageActive) {this.globalData.PageActive false;if (fn) fn();setTimeout(() > {self.globalData.PageActive true;}, 3000); //设置该时间内…