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.rhkb.cn/news/324455.html

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

相关文章

《ESP8266通信指南》15-MQTT连接、订阅MQTT主题并打印消息(基于Lua|适合新手|非常简单)

往期 《ESP8266通信指南》14-连接WIFI&#xff08;基于Lua&#xff09;-CSDN博客 《ESP8266通信指南》13-Lua 简单入门&#xff08;打印数据&#xff09;-CSDN博客 《ESP8266通信指南》12-Lua 固件烧录-CSDN博客 《ESP8266通信指南》11-Lua开发环境配置-CSDN博客 《ESP826…

JUC下CountDownLatch详解

详细介绍 CountDownLatch是Java并发包java.util.concurrent中提供的一个同步工具类&#xff0c;它允许一个或多个线程等待其他线程完成操作后再继续执行。这个工具类基于一个计数器&#xff0c;计数器的初始值可以由构造函数设定。线程调用countDown()方法会将计数器减1&#x…

深入理解JavaScript事件循环Event Loop:宏任务与微任务的奇幻之旅

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f389; 引言&#x1f31f; 什么是事件循环&#xff1f;&#x1f4da; 「宏任务」 vs 「微任务」「宏任务」(Macrotask)「微任务」(Microtask)实际应用中的注意事项 &#x1f500; 执行流程概览&#x1f4dd; 代码示例…

如何在JavaScript/Vue中获取当前时间并格式化输出(精确到时分秒)

如何在JavaScript/Vue中获取当前时间并格式化输出&#xff08;精确到时分秒&#xff09; 不只是树&#xff0c;人也是一样&#xff0c;在不确定中生活的人&#xff0c;能比较经得起生活的考验&#xff0c;会锻炼出一颗独立自主的心。在不确定中&#xff0c;就能学会把很少的养分…

在uniapp中如何安装axios并解决跨域问题

目录 1、安装axios 2、导入 3、使用&#xff08;发请求&#xff09; 2.解决跨域问题 1.为什么要解决跨域问题&#xff1f; 2.前端如何解决跨域问题&#xff1f; 1、安装axios npm install axios 2、导入 在main.js中导入使用 import axios from axios; // 创建一个名…

智慧互联,统信UOS V20桌面专业版(1070)解锁办公新模式丨年度更新

从小屏到大屏 突破&#xff0c;就在方寸之间 从人机到智脑 融合&#xff0c;旨在新质生产力 统信UOS一直致力于将先进科技与用户场景相结合&#xff0c;不断提升用户的工作效率和生产力。在最新发布的统信UOS V20桌面专业版&#xff08;1070&#xff09;版本中&#xff0c;我们…

Rust 解决循环引用

导航 循环引用一、现象二、解决 循环引用 循环引用出现的一个场景就是你指向我&#xff0c;我指向你&#xff0c;导致程序崩溃 解决方式可以通过弱指针&#xff0c;而Rust中的弱指针就是Weak 在Rc中&#xff0c;可以实现&#xff0c;对一个变量&#xff0c;持有多个不可变引…

【一支射频电缆的诞生】GORE 戈尔

工具连接&#xff1a; https://microwave-cablebuilder.gore.com/ 控制参数&#xff1a; 连接器&#xff1a; 欣赏

Android APP读写外置SD卡无权限 java.io.IOException: Permission denied

在物联网应用里&#xff0c;app需要对挂载SD卡读写文件&#xff0c;从 Android 4.4&#xff08;KitKat&#xff09;版本开始&#xff0c;Google 引入了一项名为 "Storage Access Framework" 的新功能&#xff0c;该功能限制了应用对外部存储的直接读写权限,要不然就是…

【挑战30天首通《谷粒商城》】-【第一天】03、简介-分布式基础概念

文章目录 课程介绍 ( 本章了解即可&#xff0c;可以略过)1、微服务简而言之: 2、集群&分布式&节点2.1、定义2.2、示例 3、远程调用4、负载均衡常见的负裁均衡算法: 5、服务注册/发现&注册中心6、配置中心7、服务熔断&服务降级7.1、服务熔断7.2、服务降级 8、AP…

Appium测试之获取appPackage和appActivity

appPackage和appActivity 进行appium自动化测试非常重要的两个参数&#xff0c;我们所测试的APP不同&#xff0c;这两个参数肯定也是不一样的。那如何快速的获取这APP的这两个参数呢&#xff1f;我这里介绍两个方法。 import org.openqa.selenium.remote.DesiredCapabilities;i…

从零开始学AI绘画,万字Stable Diffusion终极教程(六)

【第6期】知识补充 欢迎来到SD的终极教程&#xff0c;这是我们的第六节课&#xff0c;也是最后一节课 这套课程分为六节课&#xff0c;会系统性的介绍sd的全部功能&#xff0c;让你打下坚实牢靠的基础 1.SD入门 2.关键词 3.Lora模型 4.图生图 5.controlnet 6.知识补充 …

利用生成式AI重新构想ITSM的未来

对注入 AI 的生成式 ITSM 的需求&#xff0c;在 2023 年 Gartner AI 炒作周期中&#xff0c;生成式 AI 达到预期值达到顶峰后&#xff0c;三分之二的企业已经将生成式 AI 集成到其流程中。 你问为什么这种追求&#xff1f;在预定义算法的驱动下&#xff0c;IT 服务交付和管理中…

PyCharm 集成 Git

目录 1、配置 Git 忽略文件 2、定位Git 3、使用pycharm本地提交 3.1、初始化本地库 3.2、添加到暂存区 3.3、提交到本地库 3.4、切换版本 4、分支操作 4.1、创建分支 4.2、切换分支 4.3、合并分支 5、解决冲突 1、配置 Git 忽略文件 作用&#xff1a;与项目的实际…

【redis】Redis五种常用数据类型和内部编码,以及对String字符串类型的总结

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

51单片机入门:蜂鸣器

蜂鸣器介绍 蜂鸣器是一种将电信号转换为声音信号的器件&#xff0c;常用来产生设备的按键音、报警音等提示信号。 蜂鸣器的种类 1、从结构上&#xff1a;压电式蜂鸣器和电磁式蜂鸣器。 压电式蜂鸣器&#xff1a;通过压电陶瓷的压电效应原理工作的。当加有交变电压时&#xf…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-14-主频和时钟配置

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

轮式机器人简介

迄今为止,轮子一般是移动机器人学和人造交通车辆中最流行的运动机构。它可达到很高的效率, 如图所示, 而且用比较简单的机械就可实现它的制作。 另外,在轮式机器人设计中,平衡通常不是一个研究问题。 因为在所有时间里,轮式机器人一般都被设计成在任何时间里所有轮子均与地接…

idea上如何新建git分支

当前项目在dev分支&#xff0c;如果想在新分支上开发代码&#xff0c;如何新建一个分支呢&#xff1f;5秒搞定~ 1、工具类选择git&#xff0c;点击New Branch 或者右下角点击git分支&#xff0c;再点击New Branch 2、在弹出的Create New Branch弹窗中&#xff0c;输入你的新分支…

VMware 不能拍摄快照

问题&#xff1a; 拍摄快照后&#xff0c;会出现这个弹窗&#xff0c;然后虚拟机就直接自动退出了&#xff0c;还会弹出一个框&#xff1a; 解决方法&#xff1a; 我用的是 window11 和 VMware16.0.0 这是因为VM16与window11&#xff0c;二者之间版本不兼容问题&#xff0c;可…