uniapp百度地图聚合

news2024/12/24 20:23:01 
// loadBMap.js  ak 百度key
export default function loadBMap(ak) {
	return new Promise((resolve, reject) => {
		//聚合API依赖基础库,因此先加载基础库再加载聚合API
		asyncLoadBaiduJs(ak)
			.then(() => {
				// 调用加载第三方组件js公共方法加载其他资源库
				// 加载聚合API
				// MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.js
				asyncLoadJs('http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js')
					.then(() => {
						asyncLoadJs(
								'http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js'
								)
							.then(() => {
								asyncLoadJs(
										'http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js'
										)
									.then(() => {
										resolve()
										return true
									})
									.catch(err => {
										reject(err)
									})
							})
							.catch(err => {
								reject(err)
							})
					})
					.catch(err => {
						reject(err)
					})
			})
			.catch(err => {
				reject(err)
			})
	})
}
// 加载百度地图基础组件js
export function asyncLoadBaiduJs(ak) {
	return new Promise((resolve, reject) => {
		if (typeof BMap !== 'undefined') {
			resolve(BMap)
			return true
		}
		window.onBMapCallback = function() {
			resolve(BMap)
		}
		let script = document.createElement('script')
		script.type = 'text/javascript'
		script.src = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&s=1&callback=onBMapCallback'
		script.onerror = reject
		document.head.appendChild(script)
	})
}
// 加载第三方组件js公共方法
export function asyncLoadJs(url) {
	return new Promise((resolve, reject) => {
		let script = document.createElement('script')
		script.type = 'text/javascript'
		script.src = url
		document.head.appendChild(script)
		script.onload = () => {
			resolve()
		}
		script.onerror = reject
	})
}

// import loadBMap from '@/utils/loadBMap.js'
initMapc() {
				let that = this
				loadBMap('百度key').then(() => {
					map = new BMap.Map('mapContainer')
					const centerPoint = new BMap.Point(that.longitude, that.latitude)
					map.centerAndZoom(centerPoint, that.zoom)
					// 添加缩放控件
					map.addControl(new BMap.NavigationControl());
					markerArr = [];
					that.parkList.forEach(item => {
						let point = new BMap.Point(item.longitude, item.latitude);
						let marker = new BMap.Marker(point);
						marker.id = item.id;
						marker.title = item.name;
						marker.address = item.address
						// 添加标签
						const opts = {
							position: point, // 指定文本标注所在的地理位置
							offset: new BMap.Size(8, -30) // 设置文本偏移量
						};
						// 创建文本标注对象
						let c =
							"<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +
							"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +
							item.name +
							"    " +
							"</span>" +
							"</div>" +
							"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +
							item.address + "</div>" + "</div>"
						const label = new BMap.Label(c, opts);
						// 自定义文本标注样式
						label.setStyle({
							color: "#000",
							fontSize: "12px",
							fontFamily: "微软雅黑",
							border: '0',
							padding: '0',
							// ointerEvents: 'none' // 设置文本标签不接受鼠标事件
						});
						// 将标签添加到地图中
						// map.addOverlay(label);


						// 添加信息窗口
						marker.addEventListener('click', function() {
							// alert(`Marker ID: ${marker.id}, Title: ${marker.title}`);
							that.navigateTo('/pages/shop/packageList?id=' + marker.id + "&name=" +
								marker.title)
						});
						label.addEventListener("click", function(e) {
							// alert("您点击了文本标签");
							// console.log(e)
							// console.log(marker.id)
							that.navigateTo('/pages/shop/packageList?id=' + marker.id + "&name=" +
								marker.title)
						});
						label.setZIndex(999); // 设置zIndex属性
						marker.setLabel(label);
						markerArr.push(marker);
						map.addOverlay(marker);
					})

					var markerClusterer = new BMapLib.MarkerClusterer(map, {
						markers: markerArr
					})
					
					
					// 监听地图移动、放大缩小事件
					map.addEventListener("movestart", function(){
						markerClusterer.getMarkers().forEach(marker => {
							// console.log(marker.id)
							let c =
								"<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +
								"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +
								marker.title +
								"    " +
								"</span>" +
								"</div>" +
								"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +
								marker.address + "</div>" + "</div>"
							const label = new BMap.Label(c, {
								position: marker.getPosition(),
								offset: new BMap.Size(20, -10)
							});
							label.setStyle({
								color: "#000",
								fontSize: "12px",
								fontFamily: "微软雅黑",
								border: '0',
								padding: '0',
							});
							marker.setLabel(label);
							map.addOverlay(marker);
							label.addEventListener("click", function(e) {
								// alert("您点击了文本标签");
								// console.log(e)
								// console.log(marker.id)
								that.navigateTo('/pages/shop/packageList?id=' + marker.id +
									"&name=" +
									marker.title)
							});
						})
					});
					map.addEventListener("moveend", function(){
					    markerClusterer.getMarkers().forEach(marker => {
					    	// console.log(marker.id)
					    	let c =
					    		"<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +
					    		"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +
					    		marker.title +
					    		"    " +
					    		"</span>" +
					    		"</div>" +
					    		"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +
					    		marker.address + "</div>" + "</div>"
					    	// // 添加文本标签到每个 marker 上
					    	// const label = new BMap.Label(c, {
					    	// 	position: marker.getPosition(),
					    	// 	offset: new BMap.Size(20, -10)
					    	// });
					    	const label = new BMap.Label(c, {
					    		position: marker.getPosition(),
					    		offset: new BMap.Size(20, -10)
					    	});
					    	label.setStyle({
					    		color: "#000",
					    		fontSize: "12px",
					    		fontFamily: "微软雅黑",
					    		border: '0',
					    		padding: '0',
					    	});
					    	marker.setLabel(label);
					    	map.addOverlay(marker);
					    	label.addEventListener("click", function(e) {
					    		// alert("您点击了文本标签");
					    		// console.log(e)
					    		// console.log(marker.id)
					    		that.navigateTo('/pages/shop/packageList?id=' + marker.id +
					    			"&name=" +
					    			marker.title)
					    	});
					    })
					});
					map.addEventListener("zoomstart", function(){
					    markerClusterer.getMarkers().forEach(marker => {
					    	// console.log(marker.id)
					    	let c =
					    		"<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +
					    		"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +
					    		marker.title +
					    		"    " +
					    		"</span>" +
					    		"</div>" +
					    		"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +
					    		marker.address + "</div>" + "</div>"
					    	// // 添加文本标签到每个 marker 上
					    	// const label = new BMap.Label(c, {
					    	// 	position: marker.getPosition(),
					    	// 	offset: new BMap.Size(20, -10)
					    	// });
					    	const label = new BMap.Label(c, {
					    		position: marker.getPosition(),
					    		offset: new BMap.Size(20, -10)
					    	});
					    	label.setStyle({
					    		color: "#000",
					    		fontSize: "12px",
					    		fontFamily: "微软雅黑",
					    		border: '0',
					    		padding: '0',
					    	});
					    	marker.setLabel(label);
					    	map.addOverlay(marker);
					    	label.addEventListener("click", function(e) {
					    		// alert("您点击了文本标签");
					    		// console.log(e)
					    		// console.log(marker.id)
					    		that.navigateTo('/pages/shop/packageList?id=' + marker.id +
					    			"&name=" +
					    			marker.title)
					    	});
					    })
					});
					map.addEventListener("zoomend", function(){
					    markerClusterer.getMarkers().forEach(marker => {
					    	// console.log(marker.id)
					    	let c =
					    		"<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +
					    		"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +
					    		marker.title +
					    		"    " +
					    		"</span>" +
					    		"</div>" +
					    		"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +
					    		marker.address + "</div>" + "</div>"
					    	// // 添加文本标签到每个 marker 上
					    	// const label = new BMap.Label(c, {
					    	// 	position: marker.getPosition(),
					    	// 	offset: new BMap.Size(20, -10)
					    	// });
					    	const label = new BMap.Label(c, {
					    		position: marker.getPosition(),
					    		offset: new BMap.Size(20, -10)
					    	});
					    	label.setStyle({
					    		color: "#000",
					    		fontSize: "12px",
					    		fontFamily: "微软雅黑",
					    		border: '0',
					    		padding: '0',
					    	});
					    	marker.setLabel(label);
					    	map.addOverlay(marker);
					    	label.addEventListener("click", function(e) {
					    		// alert("您点击了文本标签");
					    		// console.log(e)
					    		// console.log(marker.id)
					    		that.navigateTo('/pages/shop/packageList?id=' + marker.id +
					    			"&name=" +
					    			marker.title)
					    	});
					    })
					});
				})
			},

在这里插入图片描述

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

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

相关文章

基于STM32移植lvgl(V8.2)（SPI接口的LCD）

基于STM32移植lvgl(V8.2)（SPI接口的LCD）

目录 概述 1 认识LVGL 1.1 LVGL官网 1.2 LVGL库文件下载 2 认识SPI接口型LCD 2.1 PIN引脚定义 2.2 MCU IO与LCD PIN对应关系 3 实现LCD驱动 3.1 使用STM32Cube配置Project 3.2 STM32Cube生成工程 4 移植LVGL 4.1 准备移植文件 4.2 添加lvgl库文件到项目 4.2.1 src下…
阅读更多...
【半夜学习MySQL】表结构的操作（含表的创建、修改、删除操作，及如何查看表结构）

【半夜学习MySQL】表结构的操作（含表的创建、修改、删除操作，及如何查看表结构）

&#x1f3e0;关于专栏&#xff1a;半夜学习MySQL专栏用于记录MySQL数据相关内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 创建表查看表结构修改表删除表 创建表 语法&#xff1a; create table table_name(field1 datatype,field2 datatype,fiel…
阅读更多...
springboot3项目练习详细步骤（第三部分：文章管理模块）

springboot3项目练习详细步骤（第三部分：文章管理模块）

目录 发布文章 接口文档 业务实现 自定义参数校验 项目参数要求 实现思路 实现步骤 文章列表(条件分页) 接口文档 业务实现 mapper映射 更新文章 接口文档 业务实现 获取文章详情 接口文档 业务实现 删除文章 接口文档 业务实现 文章管理业务表结构…
阅读更多...
Java入门基础学习笔记1——初识java

Java入门基础学习笔记1——初识java

1、为什么学习java&#xff1f; 几乎统治了服务端的开发&#xff1b;几乎所有的互联网企业都使用&#xff1b;100%国内大中型企业都用&#xff1b;全球100亿的设备运行java。开发岗位薪资高。 Java的流行度很高&#xff0c;商用占有率很高。 可移植性。 2、Java的背景知识 …
阅读更多...
Springboot集成SpringbootAdmin实现服务监控管理-10

Springboot集成SpringbootAdmin实现服务监控管理-10

SpringbootAdmin Spring Boot Admin是一个用于管理和监控Spring Boot应用程序的开源软件。 概要介绍 Spring Boot Admin可以监控Spring Boot单机或集群项目&#xff0c;它提供了详细的健康&#xff08;Health&#xff09;信息、内存信息、JVM系统和环境属性、垃圾回收信息、…
阅读更多...
解决在Outlook中预定Teams会议不显示入会链接的问题

解决在Outlook中预定Teams会议不显示入会链接的问题

今天遇到一个很蛋疼的teams问题&#xff0c;花了点时间才解决。本来以为是很简单的问题&#xff0c;随便网上冲浪一下就能找到答案的&#xff0c;结果根本就没有好的解决方案&#xff0c;所以我分享出来希望后来的老哥少走点弯路。 问题描述 简单来说&#xff0c;就是在Outlo…
阅读更多...
使用 MSYS2 Qt6 发布绿色版的SDR软件无线电应用

使用 MSYS2 Qt6 发布绿色版的SDR软件无线电应用

文章目录 概要整体架构流程技术名词解释技术细节在启动器中为子进程设置路径和环境。如何迅速找齐所有的DLL 小结附件 概要 新接触软件定义无线电&#xff08;SDR&#xff09;的朋友一般都会一股脑的安装一些现有的SDR平台。无论是GNURadio还是SDR、SDRSharp、SDRAngel&#x…
阅读更多...
一文了解spring的aop知识

一文了解spring的aop知识

推荐工具 objectlog 对于重要的一些数据&#xff0c;我们需要记录一条记录的所有版本变化过程&#xff0c;做到持续追踪&#xff0c;为后续问题追踪提供思路。objectlog工具是一个记录单个对象属性变化的日志工具,工具采用spring切面和mybatis拦截器相关技术编写了api依赖包&a…
阅读更多...
[windows系统安装/重装系统][step-3]装驱动、打驱动、系统激活

[windows系统安装/重装系统][step-3]装驱动、打驱动、系统激活

重装系统三部曲 [windows系统安装/重装系统][step-1]U盘启动盘制作&#xff0c;微软官方纯净系统镜像下载-CSDN博客 [windows系统安装/重装系统][step-2]BIOS设置UEFI引导、磁盘分区GPT分区、安装系统[含完整操作拍照图片]-CSDN博客 [windows系统安装/重装系统][step-3]装驱动…
阅读更多...
【C++】CentOS环境搭建-安装CATCH2

【C++】CentOS环境搭建-安装CATCH2

【C】CentOS环境搭建-安装CATCH2 1.克隆Catch2仓库2. 进入Catch2目录3. 创建一个构建目录4. 使用CMake生成构建系统&#xff08;以及可能的编译&#xff09;5.安装Catch2&#xff08;可选&#xff0c;根据你的需求&#xff09; 1.克隆Catch2仓库 git clone https://github.com…
阅读更多...
AI图书推荐：ChatGPT全面指南—用AI帮你更健康、更富有、更智慧

AI图书推荐：ChatGPT全面指南—用AI帮你更健康、更富有、更智慧

你是否在努力改善你的健康&#xff1f; 你是否长期遭受财务困难&#xff1f; 你想丰富你的思想、身体和灵魂吗&#xff1f; 如果是这样&#xff0c;那么这本书就是为你准备的。 《ChatGPT全面指南—用AI帮你更健康、更富有、更智慧》&#xff08;CHATGPT Chronicles AQuick…
阅读更多...
MBR与GPT分区表

MBR与GPT分区表

文章目录 MBR分区表MBR分区表结构MBR分区表项查看U盘的分区表信息查看系统中所有磁盘的分区类型获取分区表信息 GPT分区表保护性MBRGPT分区表头格式GPT分区表项格式分区类型分区属性分区表项内容 MBR分区表 CHS &#xff1a;磁头&#xff08;Heads&#xff09;、柱面(Cylinder…
阅读更多...
#兼职副业赚钱吗？# 宝妈与上班族在水牛社的财富探索

#兼职副业赚钱吗？# 宝妈与上班族在水牛社的财富探索

在这个繁忙的都市节奏中&#xff0c;宝妈与上班族都面临着平衡家庭与经济的挑战。那么&#xff0c;兼职副业真的能为他们带来额外的收入吗&#xff1f;接下来&#xff0c;让我们通过两个实例&#xff0c;揭示宝妈和上班族是如何在水牛社找到兼职副业赚钱的契机的。 ✨ 宝妈的故…
阅读更多...
6个超TM好用的神仙App推荐！

6个超TM好用的神仙App推荐！

1. AI文本视频生成工具——Jurilu Jurilu 是一款功能强大的 AI 文本视频生成器&#xff0c;允许用户快速将文本内容转换成极具吸引力的视频。它的使用非常简单&#xff1a;只需要输入文字&#xff0c;选择想要的样式和模板&#xff0c;Jurilu 就会自动将文字转换成生动的视频。…
阅读更多...
JINGWHALE 量子能量意识进化理论 —— 全息世界

JINGWHALE 量子能量意识进化理论 —— 全息世界

JINGWHALE 对此论文相关未知以及已知概念、定理、公式、图片等内容的感悟、分析、创新、创造等拥有作品著作权。未经 JINGWHALE 授权&#xff0c;禁止转载与商业使用。 人类对于自身的来源充满了好奇心和求知欲望&#xff0c;探索人类起源是人类科学研究和探索的重要领域之一。…
阅读更多...
UnsupportedClassVersionError异常如何解决？

UnsupportedClassVersionError异常如何解决？

下面是异常报错的详细描述 java -version java version "17.0.11" 2024-04-16 LTS Java(TM) SE Runtime Environment (build 17.0.117-LTS-207) Java HotSpot(TM) 64-Bit Server VM (build 17.0.117-LTS-207, mixed mode, sharing) 环境变量已经是jdk17&#xff0c;但…
阅读更多...
机器学习——6.模型训练案例: 预测儿童神经缺陷分类TD/ADHD

机器学习——6.模型训练案例: 预测儿童神经缺陷分类TD/ADHD

案例目的 有一份EXCEL标注数据&#xff0c;如下&#xff0c;训练出合适的模型来预测儿童神经缺陷分类。 参考文章&#xff1a;机器学习——5.案例: 乳腺癌预测-CSDN博客 代码逻辑步骤 读取数据训练集与测试集拆分数据标准化数据转化为Pytorch张量label维度转换定义模型定义损…
阅读更多...
手写一个SPI FLASH 读写擦除控制器（未完）

手写一个SPI FLASH 读写擦除控制器（未完）

文章目录 flash读写数据的特点1. 扇擦除SE&#xff08;Sector Erase&#xff09;1.1 flash_se 模块设计1.1.1 信号连接示意图&#xff1a;1.1.2 SE状态机1.1.3 波形图设计&#xff1a;1.1.4 代码 2. 页写PP(Page Program)2.1 flash_pp模块设计2.1.1 信号连接示意图&#xff1a;…
阅读更多...
基于STM32F401RET6智能锁项目（使用库函数点灯、按键）

基于STM32F401RET6智能锁项目（使用库函数点灯、按键）

点灯硬件原理图 1、首先&#xff0c;我们查看一下原理图&#xff0c;找到相对应的GPIO口 LED_R低电平导通&#xff0c;LED4亮&#xff0c;所以LED_R的GPIO口需要配置一个低电平才能亮&#xff1b; LED_G低电平导通&#xff0c;LED3亮&#xff0c;所以LED_R的GPIO口需要配置一…
阅读更多...
[ES] ElasticSearch节点加入集群失败经历分析主节点选举、ES网络配置 [publish_address不是当前机器ip]

[ES] ElasticSearch节点加入集群失败经历分析主节点选举、ES网络配置 [publish_address不是当前机器ip]

背景 三台CentOS 7.6.1虚拟机&#xff0c; 每台虚拟机上启动一个ElasticSearch 7.17.3&#xff08;下面简称ES&#xff09;实例 即每台虚拟机上一个ES进程&#xff08;每台虚拟机上一个ES节点&#xff09; 情况是&#xff1a; 之前集群是搭建成功的, 但是今天有一个节点一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023