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

news2025/1/12 4:58:34

 注意:使用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并显示在视野范围内

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

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

相关文章

省市区三级联动(后端)

前提&#xff1a;springboot、mybatis-plus、swagger 数据库&#xff1a; 文章顶部 实体类&#xff1a; City package com.itfly.entity;import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import java.time.Loca…

【Axure高保真原型】环形进度条(开始暂停效果)

今天和大家分享环形进度条&#xff08;开始暂停效果&#xff09;的原型模版&#xff0c;效果包括&#xff1a; 点击开始按钮&#xff0c;可以环形进度条开始读取&#xff0c;中部百分比显示环形的读取进度&#xff1b; 在读取过程中&#xff0c;点击暂停按钮&#xff0c;可以随…

CTFshow—文件包含

Web78-81 Web78 这题是最基础的文件包含&#xff0c;直接?fileflag.php是不行的&#xff0c;不知道为啥&#xff0c;直接用下面我们之前在命令执行讲过的payload即可。 ?filephp://filter/readconvert.base64-encode/resourceflag.php Web79 这题是过滤了php&#xff0c;…

Jenkins pipeline 发送邮件及包含附件

Jenkins pipeline 发送邮件及包含附件 设置邮箱开启SMTP服务 此处适用163 邮箱 开启POP3/SMTP服务通过短信获取TOKEN &#xff08;保存TOKEN, 后面Jenkins会用到&#xff09; Jenkins 邮箱设置 安装 Build Timestamp插件 设置全局凭证 Dashboard -> Manage Jenkins …

【微服务】8、分布式事务 ( XA 和 AT )

文章目录 利用Seata解决分布式事务问题&#xff08;XA模式&#xff09;AT模式1. AT模式原理引入2. AT模式执行流程与XA模式对比3. AT模式性能优势及潜在问题4. AT模式数据一致性解决方案5. AT模式一阶段操作总结6. AT模式二阶段操作分析7. AT模式整体特点8. AT模式与XA模式对比…

Java解析Excel表格

Java解析Excel表格 <!-- Excel 表格解析 --><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>4.0.3</version></dependency>简单使用 // 创建一个读取监听器 ReadListener<E…

Bytebase 3.1.2 - 在 SQL 编辑器中为表、列和 PG 的视图注释显示鼠标悬浮提示

&#x1f680; 新功能 在 SQL 编辑器中为表、列和 PostgreSQL 的视图注释显示鼠标悬浮提示。 IM, Webhook 集成支持 Lark。展示 Redshift 表或视图的定义。 &#x1f514; API 重大变更 弃用脱敏策略 API /v1/{instance}/{database}/policies/masking&#xff0c;改为调用 /v…

C#里使用libxl读取EXCEL文件里的图片并保存出来

有时候需要读取EXCEL里的图片文件, 因为很多用户喜欢使用图片保存在EXCEL里,比如用户保存一些现场整改的图片。 如果需要把这些图片抽取出来,再保存到系统里,就需要读取这些图片数据,生成合适的文件再保存。 在libxl里也提供了这样的方法, 如下: var picType = boo…

NAT 代理服务器

文章目录 1. NAT2. 内网穿透3. 内网打洞4. 代理服务器正向代理服务器反向代理服务器 5. DNS6. ICMP7.测试内网穿透 1. NAT 在ip协议章节&#xff0c;我们说报文转发给路由器时&#xff0c;由于私有IP地址不能出现在公网中&#xff0c;路由器会将报文源IP地址替换为路由器的WAN…

Android - NDK :JNI实现异步回调

在android代码中&#xff0c;通过JNI调用c层子线程执行耗时任务&#xff0c;在c层子线程中把结果回调到android层&#xff0c; C语言小白&#xff0c;请批评指正&#xff01; android层代码&#xff1a; import androidx.appcompat.app.AppCompatActivity;import android.os.…

【Altium】AD使用智能粘贴功能把多个网络标签改成端口

1、 文档目标 使用智能粘贴功能把多个网络标签&#xff08;net lable&#xff09;改成端口&#xff08;port&#xff09; 2、 问题场景 客户有一份原理图&#xff0c;网络用的是net label&#xff0c;没用Port&#xff0c;然后创建一个sheet symbol&#xff0c;但是sheet sy…

软件系统安全逆向分析-混淆对抗

1. 概述 在一般的软件中&#xff0c;我们逆向分析时候通常都不能直接看到软件的明文源代码&#xff0c;或多或少存在着混淆对抗的操作。下面&#xff0c;我会实践操作一个例子从无从下手到攻破目标。 花指令对抗虚函数表RC4 2. 实战-donntyousee 题目载体为具有漏洞的小型软…

01 springboot集成mybatis后密码正确但数据库连接失败

01 springboot集成mybatis后密码正确但数据库连接失败 问题描述&#xff1a; 1.datasource配置&#xff1a; //application.yaml spring:datasource:url: jdbc:mysql://127.0.0.1:3306/mp?useUnicodetrue&characterEncodingUTF-8&autoReconnecttrue&serverTime…

Python基于jieba和wordcloud绘制词云图

【Cesium】自定义材质&#xff0c;添加带有方向的滚动路线 &#x1f356; 前言&#x1f3b6;一、实现过程✨二、代码展示&#x1f3c0;三、运行结果&#x1f3c6;四、知识点提示 &#x1f356; 前言 Python基于jieba和wordcloud绘制词云图 &#x1f3b6;一、实现过程 读取文本…

保证Mysql数据库到ES的数据一致性的解决方案

文章目录 1.业务场景介绍1.1 需求分析1.2 技术实现方案 2.业界常用数据一致性方案分析2.1 同步双写方案2.2 MQ异步双写方案2.3 扫表定期同步方案2.4 监听binlog同步方案 1.业务场景介绍 1.1 需求分析 某知名的在线旅游平台&#xff0c;在即将到来的春季促销活动之前&#xff…

文件搜索工具Everything

软件介绍 Everything 是一款运行于 Windows 系统的轻量级、高效的文件搜索工具 软件功能 1、基本搜索 在搜索框输入关键词&#xff0c;即可快速找到包含该关键词的文件和文件夹。 2、高级搜索 支持多种高级搜索语法&#xff0c;如.exe&#xff1a;可只返回特定扩展名的结果…

【面试题】技术场景 6、Java 生产环境 bug 排查

生产环境 bug 排查思路 分析日志&#xff1a;首先通过分析日志查看是否存在错误信息&#xff0c;利用之前讲过的 elk 及查看日志的命令缩小查找错误范围&#xff0c;方便定位问题。远程 debug 适用环境&#xff1a;一般公司正式生产环境不允许远程 debug&#xff0c;多在测试环…

【UE5 C++课程系列笔记】25——多线程基础——FGraphEventRef的简单使用

目录 概念 使用示例1 使用示例2 概念 FGraphEventRef 本质上是对一个异步任务或者一组相关异步任务在虚幻引擎任务图系统中的一种引用&#xff08;reference&#xff09;。虚幻引擎的任务图系统用于高效地调度和管理各种异步任务&#xff0c;协调它们的执行顺序以及处理任务…

DeepSeek:性能强劲的开源模型

deepseek 全新系列模型 DeepSeek-V3 首个版本上线并同步开源。登录官网 chat.deepseek.com 即可与最新版 V3 模型对话。 性能对齐海外领军闭源模型​ DeepSeek-V3 为自研 MoE 模型&#xff0c;671B 参数&#xff0c;激活 37B&#xff0c;在 14.8T token 上进行了预训练。 论…

使用 SQL 和表格数据进行问答和 RAG(1)—数据库准备

一. 从 .sql/csv/xlsx 文件创建 sqlite 数据库。 要从.sql文件准备 SQL DB&#xff0c;这里会将创建数据库的代码放到了&#xff0c;将文件复制到data/sql目录中&#xff0c;然后在终端中的项目文件夹中执行&#xff1a; pip install sqlite3现在创建一个名为sqldb的数据库&a…