uniapp百度地图聚合

// loadBMap.js  ak 百度key
export default function loadBMap(ak) {return new Promise((resolve, reject) => {//聚合API依赖基础库,因此先加载基础库再加载聚合APIasyncLoadBaiduJs(ak).then(() => {// 调用加载第三方组件js公共方法加载其他资源库// 加载聚合API// MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.jsasyncLoadJs('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 = rejectdocument.head.appendChild(script)})
}
// 加载第三方组件js公共方法
export function asyncLoadJs(url) {return new Promise((resolve, reject) => {let script = document.createElement('script')script.type = 'text/javascript'script.src = urldocument.head.appendChild(script)script.onload = () => {resolve()}script.onerror = reject})
}

// import loadBMap from '@/utils/loadBMap.js'
initMapc() {let that = thisloadBMap('百度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.mzph.cn/pingmian/9390.shtml

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

相关文章

Oracle数据库如何插入平方(²)立方(³)字符

Oracle数据库如何插入平方(²)立方(³)字符

第一步&#xff1a;创建数据表&#xff0c;字段一定要是NVARCHAR2类型的 第二步&#xff0c;插入数据用 unistr(1\00b3) 形式的写法 00b3 代表m&#xff0c;00b2代表㎡ SELECT * FROM TESTABC; UPDATE TESTABC set NAME1unistr(1\00b3); UPDATE TESTABC set NAME2unistr(2\00b2…
阅读更多...
【LLM多模态】MiniGPT4模型结构和训练流程

【LLM多模态】MiniGPT4模型结构和训练流程

note 图生文应用场景&#xff1a;比如电商领域根据产品图像生成产品描述、娱乐领域中根据电影海报生成电影介绍等MiniGPT-4将预训练的大语言模型和视觉编码器参数同时冻结&#xff0c;只需要单独训练线性投影层&#xff0c;使视觉特征和语言模型对齐。MiniGPT4的视觉编码器&am…
阅读更多...
centos 8.5 Node v20.12.2 npm 安装及环境配置 配置淘宝最新镜像地址

centos 8.5 Node v20.12.2 npm 安装及环境配置 配置淘宝最新镜像地址

1下载&#xff1a;Node.js — Download Node.js 2文件上传到服务器 rootlocalhost software]# tar xvf node-v20.12.2-linux-x64.tar.xz [rootlocalhost software]# mv node-v20.12.2-linux-x64/ /usr/local/node [rootlocalhost software]# vim /etc/profile export PA…
阅读更多...
VSCode：设置搜索时的排除目录

VSCode：设置搜索时的排除目录

VSCode搜索时默认会搜索目录下所有文件 $ tree . ├── a.c ├── m.c └── x └── b.c //a.c #include <stdio.h> #include <string.h>int main() {char s[] "hello\n";fprintf(stdout, s, strlen(s));return 0; } //m.c #include <stdio…
阅读更多...
【LSTM】LSTM网络及参数学习笔记

【LSTM】LSTM网络及参数学习笔记

图1 LSTM模型结构可视化 [6]. 图2 LSTM cell结构说明 图3 LSTM cell和num_units说明 [4]. 图4 LSTM的网络结构 1. LSTM 是对一个LSTM层的抽象&#xff0c;可以看成是由多个LSTM cell组成&#xff0c;是包含时间步的一个网络 2. LSTM cell 图2是LSTM在时间步上的结构&#xf…
阅读更多...
【硬件开发】原型设计对于成功产品开发重要性及常见阶段

【硬件开发】原型设计对于成功产品开发重要性及常见阶段

电子产品的设计与开发始于原型制作阶段。这些原型虽可能与最终产品极为相似&#xff0c;但总带有实验性质&#xff0c;因为电子原型的制作过程包括对新概念、新思想及新解决方案的测试。虽然存在出错的风险&#xff0c;跳过这一阶段可能会导致不必要的开支。不擅长电子硬件设计…
阅读更多...
2024年想要开一家抖音小店，需要多少钱？一篇详解！

2024年想要开一家抖音小店，需要多少钱？一篇详解！

大家好&#xff0c;我是电商糖果 随着抖音卖货的持续火爆&#xff0c;抖音小店也成了电商行业讨论度最大的项目之一。 不少朋友都想知道&#xff0c;如果今年开抖音小店大概需要多少钱。 糖果做小店的时间也比较长&#xff0c;也经营了多家小店。 对于开一家抖音小店需要多…
阅读更多...
多规格产品应该如何设置呢？

多规格产品应该如何设置呢？

今天一用户从供应商手中拿到产品价目表&#xff0c;但是设置起来蒙圈了&#xff0c;接下来我们就一起设置一下吧&#xff5e; 一、产品价格表 我们通过供应商手中拿到产品价目表是这个样子的&#xff1a; 我们可以看到此产品的销售客价根据不同地区导致的价格不同&#xff0…
阅读更多...
ABAP小技巧汇总（自用）

ABAP小技巧汇总（自用）

1.TIMESTAMP搜索帮助 PARAMETERS:p_begin TYPE ty_screen-date_begiu MATCHCODE OBJECT cpe_timestamp, "开始时间戳p_end TYPE ty_screen-date_end MATCHCODE OBJECT cpe_timestamp. "结束时间戳 效果&#xff1a;
阅读更多...
Git笔记-常用指令

Git笔记-常用指令

Git笔记-常用指令 一、概述二、仓库管理二、缓存区操作1. 添加文件到缓存区2. 取消缓存文件3. 忽略列表 三、日志状态信息四、分支操作五、六、 一、概述 这里记录一些git常用的指令。 二、仓库管理 # 本地仓库初始化 git init# 克隆仓库 git clone git_url # git clone ht…
阅读更多...
win11个性化锁屏界面怎么关闭？

win11个性化锁屏界面怎么关闭？

win11个性化锁屏界面关闭方法对于win11用户来说&#xff0c;关闭个性化锁屏界面是一个常见问题。本文将由php小编苹果详细介绍如何执行此操作&#xff0c;分步指导并提供操作截图。继续阅读以了解具体步骤。 win11个性化锁屏界面关闭方法 第一步&#xff0c;点击底部Windows图…
阅读更多...
python数据分析常用基础语法

python数据分析常用基础语法

Python语言基础——语法基础 前言一、变量的介绍与使用变量的介绍变量命名规则变量的使用拓展 二、标识符标识符命名命名规则注意事项 三、数据类型数据类型的介绍数据类型的查看示例 四、输入与输出输入和输出的介绍format格式化输出占位符 五、代码缩进与注释代码缩进 前言 …
阅读更多...
【论文速读】| LLM4FUZZ：利用大语言模型指导智能合约的模糊测试

【论文速读】| LLM4FUZZ：利用大语言模型指导智能合约的模糊测试

本次分享论文&#xff1a;LLM4FUZZ: Guided Fuzzing of Smart Contracts with Large Language Models 基本信息 原文作者&#xff1a;Chaofan Shou, Jing Liu, Doudou Lu, Koushik Sen 作者单位&#xff1a;加州大学伯克利分校&#xff0c;加州大学欧文分校&#xff0c;Fuzz…
阅读更多...
计算机网络-DHCPv6配置

计算机网络-DHCPv6配置

DHCPv6实验配置 一、DHCPv6有状态配置 拓扑图&#xff1a; 请求报文 回复报文中的信息 配置&#xff1a; # 全局启用ipv6 ipv6 # 启用DHCP dhcp enable# 创建dhcpv6的地址池 dhcpv6 pool pool1address prefix 2001::/64excluded-address 2001::10dns-server 2001:4860:4860::8…
阅读更多...
【新版系统架构】知识点背诵默写本

【新版系统架构】知识点背诵默写本

前言 系统架构考试在即&#xff0c;想要考试的人肯定感受到了沉甸甸的压力和紧迫感&#xff0c;脑海中不断闪过知识点的画面&#xff0c;却让人有些头昏脑胀&#xff0c;发现很难完全记住&#xff0c;这个考试很难&#xff0c;知识点很多。这次我在准备考试的同时&#xff0c;…
阅读更多...
基于Java+SpringBoot+Vue前后端分离教学资源共享平台系统

基于Java+SpringBoot+Vue前后端分离教学资源共享平台系统

基于JavaSpringBootVue前后端分离教学资源共享平台系统 &#x1f345; 作者主页 网顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统…
阅读更多...
Meta最新成果：前所未有的加速Emu推理 | Imagine Flash：新型蒸馏框架发布

Meta最新成果：前所未有的加速Emu推理 | Imagine Flash：新型蒸馏框架发布

文章地址&#xff1a;https://arxiv.org/pdf/2405.05224 扩散模型是一个强大的生成框架&#xff0c;但推理过程非常昂贵。现有的加速方法通常会在极低步骤情况下牺牲图像质量&#xff0c;或者在复杂条件下失败。这项工作提出了一个新颖的蒸馏框架&#xff0c;旨在通过仅使用一…
阅读更多...
系统思考—愿景领导

系统思考—愿景领导

“如果你总是低着头&#xff0c;那么你永远无法看见彩虹。”这句话不仅是对个人的提醒&#xff0c;也极其适用于每一位企业创始人。每位创始人背后不仅有一个梦想&#xff0c;还有一段充满爱的故事。 在作为策略顾问的角色中&#xff0c;我深知聆听的重要性——需要全神贯注地…
阅读更多...
链表第4/9题--翻转链表--双指针法

链表第4/9题--翻转链表--双指针法

LeetCode206&#xff1a;给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例…
阅读更多...
防火墙技术基础篇：解析防火墙应用层代理概念及功能

防火墙技术基础篇：解析防火墙应用层代理概念及功能

防火墙技术基础篇&#xff1a;解析防火墙应用层代理概念及功能 1 应用层代理的概念 应用层代理&#xff08;Application Proxy&#xff09;&#xff1a;防火墙应用层代理是网络安全领域中的一种重要技术&#xff0c;工作在OSI模型的第七层&#xff0c;即应用层。它通过代理服…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023