当前位置: 首页 > news >正文

Vue使用BMapGL,及marker简单使用

1、封装加载器

export function BMapLoader(ak) {return new Promise((resolve, reject) => {if (window.BMapGL) {resolve(window.BMapGL)} else {const script = document.createElement('script')script.type = 'text/javascript'script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&callback=initBMap&ak=' + akscript.async = truescript.onerror = rejectdocument.head.appendChild(script)}window.initBMap = function () {resolve(window.BMapGL)}})}

2、初始化地图

initEcharts() {this.$nextTick(() => {BMapLoader('UdQGUa0BgiwGEvGs5aQHLCasM5LEEpTO').then(BMapGL => {const map = new BMapGL.Map('echarts1', { enableMapClick: false })this.map = mapmap.disableKeyboard() // 禁用键盘操作地图map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放// 添加中心点和缩放等级,如果不添加,初始化出来页面为白屏const point = new BMapGL.Point(116.280190, 40.049191)map.centerAndZoom(point, 15)map.enableScrollWheelZoom(true);map.setHeading(64.5);
map.setTilt(73);})})},

html

 <div id="echarts1" style="width: 100%; margin-bottom: 20px"></div>

3、简单使用

1)地图点击事件(我们可以从返回值event中获取经纬度)

map.addEventListener('click', function(e) {console.log(e);
});

2)创建一个位置

 const point = new BMapGL.Point(116.280190, 40.049191)

3)在位置上创建一个标记点

let marker = new BMapGL.Marker(point);  
map.addOverlay(marker);  

4)创建一个信息框

let opts = {width: 250,     // 信息窗口宽度height: 100,    // 信息窗口高度
}
let infoWindow = new BMapGL.InfoWindow("采集点:23<br/>电耗:2901.9kwh<br/>全校占比:10.9%", {...opts,...{title: "综合楼"}}); 

5)将信息框的点击事件绑定到标记点上

marker.addEventListener("click", function(){          map.openInfoWindow(infoWindow, point); //开启信息窗口}); 

相关文章:

Vue使用BMapGL,及marker简单使用

1、封装加载器 export function BMapLoader(ak) {return new Promise((resolve, reject) > {if (window.BMapGL) {resolve(window.BMapGL)} else {const script document.createElement(script)script.type text/javascriptscript.src https://api.map.baidu.com/api?v…...

WuThreat身份安全云-TVD每日漏洞情报-2023-10-10

漏洞名称:Glibc ld.so本地权限提升漏洞 漏洞级别:高危 漏洞编号:CVE-2023-4911,CNNVD-202310-197 相关涉及:系统-ubuntu_22.04-glibc-*-Up to-(excluding)-2.35-0ubuntu3.4- 漏洞状态:POC 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-24714 漏洞名称:D-L…...

BSCI认证是谁来验厂?

BSCI认证是BusinessSocialComplianceInitiative的缩写&#xff0c;中文被叫做商业社会标准认证。而BSCI则是倡议商界遵守社会责任的组织&#xff0c;同时它是一个非营利性的组织&#xff0c;宗旨是通过一套统一程序&#xff0c;同时不断完善发展政策&#xff0c;实现监控和促进…...

Java中如何在两个线程间共享数据

Java中如何在两个线程间共享数据 在Java中&#xff0c;在两个线程之间共享数据是常见的需求&#xff0c;但需要小心处理以确保线程安全性。有多种方式可以在两个线程之间共享数据&#xff0c;下面将详细介绍这些方式&#xff0c;以及它们的优缺点。 方式1&#xff1a;共享可变…...

4、在 CentOS 8 系统上安装 pgAdmin 4

pgAdmin 4 是一个开源的数据库管理工具&#xff0c;专门用于管理和操作 PostgreSQL 数据库系统。它提供了一个图形用户界面&#xff08;GUI&#xff09;&#xff0c;使用户能够轻松地连接到 PostgreSQL 数据库实例&#xff0c;执行 SQL 查询&#xff0c;管理数据库对象&#xf…...

【数字人】3、LIA | 使用隐式空间来实现视频驱动单张图数字人生成(ICLR 2022)

文章目录 一、背景二、方法2.1 latent motion representation2.2 latent code driven image animation2.3 学习方式2.4 推理 三、效果3.1 数据集3.2 训练细节3.3 评估3.4 定性效果3.5 定量效果3.6 消融实验3.7 失败示例 论文&#xff1a;Latent Image Animator: Learning to An…...

深度学习基础知识 最近邻插值法、双线性插值法、双三次插值算法

深度学习基础知识 最近邻插值法、双线性插值法、双三次插值算法 1、最近邻插值法 1、最近邻插值法 *最邻近插值&#xff1a;将每个目标像素找到距离它最近的原图像素点&#xff0c;然后将该像素的值直接赋值给目标像素 优点&#xff1a;实现简单&#xff0c;计算速度快缺点&…...

计算机竞赛 : 题目:基于深度学习的水果识别 设计 开题 技术

1 前言 Hi&#xff0c;大家好&#xff0c;这里是丹成学长&#xff0c;今天做一个 基于深度学习的水果识别demo 这是一个较为新颖的竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/pos…...

【2023美团后端-8】删除字符串的方案,限制不能连续删

小美定义一个字符申是“美丽串”&#xff0c;当且仅当该字符串包含”mei”连续子串。例如”meimei”、“xiaomeichan"都是美丽串&#xff0c;现在小美拿到了一个字符串&#xff0c;她准备删除一些字符&#xff0c;但不能删除两个连续字符。小美希望最终字符串变成美丽串&a…...

蓝桥等考Python组别十七级008

第一部分:选择题 1、Python L17 (15分) 运行下面程序,输出的结果是( )。 def func(x, y): return (x - y) % 2 print(func(10, 5)) 2152.5正确答案:B 2、Python L17 (15分) 运行下面程序,输...

docker安装sql-server数据库,使用navicat实现备份数据库导入

docker安装sql-server&#xff0c;使用navicat实现备份数据库导入 1、docker安装sql-server数据库2、使用navicat连接sql-server3、使用navicat导入备份数据库1、第一步&#xff1a;选择需要备份的数据源2、第二步 &#xff08;选择备份计划&#xff0c;设置还原文件位置信息&a…...

深度学习batch、batch_size、epoch、iteration以及小样本中episode、support set、query set关系

batch、batch_size、epoch、iteration关系&#xff1a; epoch&#xff1a;整个数据集 batch&#xff1a; 整个数据集分成多少小块进行训练 batch_size&#xff1a; 一次训练&#xff08;1 batch&#xff09;需要 batch_size个样本 iteration&#xff1a; 整个数据集需要用b…...

Air001 TIM1高级定时器单脉冲输出模式使用

Air001 TIM1高级定时器单脉冲输出模式使用 ✨本例程基于合宙官方提供的标准库以及Demo工程作为验证参考。&#x1f4cd;官方提供的SDK包资源&#xff1a;https://gitee.com/openLuat/luatos-soc-air001&#x1f33f;想了解STM32高级定时器单脉冲输出模式了解可以参考阅读:https…...

矿机生意难做,比特大陆停发工资

文/章鱼哥 出品/陀螺财经 沉寂了许久的比特大陆&#xff0c;因为一则延迟发薪的公告引起了圈内热议&#xff0c;熊市下&#xff0c;曾经风头无两的比特大陆&#xff0c;现金流也会扛不住吗&#xff1f; 据吴说区块链报道&#xff0c;多名比特大陆内部员工确认&#xff0c;比特大…...

计算机竞赛python区块链实现 - proof of work工作量证明共识算法

文章目录 0 前言1 区块链基础1.1 比特币内部结构1.2 实现的区块链数据结构1.3 注意点1.4 区块链的核心-工作量证明算法1.4.1 拜占庭将军问题1.4.2 解决办法1.4.3 代码实现 2 快速实现一个区块链2.1 什么是区块链2.2 一个完整的快包含什么2.3 什么是挖矿2.4 工作量证明算法&…...

pyqt 划线标注工具,可用于车道线标注

目录 效果图: pyqt代码: opencv划线: 效果图: pyqt代码: import osfrom PyQt5.QtWidgets import QWidget, QApplication, QVBoxLayout, QPushButton, QLabel from PyQt5.QtGui import QPainter, QPen, QColor, QImage, QPixmap from PyQt5.QtCore import Qt, QPoint i…...

蓝桥等考Python组别十七级004

第一部分:选择题 1、Python L17 (15分) 运行下面程序,输出的结果是( )。 def func(x, y): return (x - y) // 2 print(func(10, 4)) 2356正确答案:B 2、Python L17 (15...

计算机毕业设计选什么题目好?springboot 职业技术学院图书管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

外汇天眼:6个常见网络投资诈骗迹象,如发现任何一个,务必小心!

在这个数字时代&#xff0c;随着外汇和加密货币市场的不断发展&#xff0c;网络投资已经成为一种广受欢迎的理财方式。然而&#xff0c;近年来&#xff0c;诈骗犯罪也在不断增加&#xff0c;给社会带来了巨大的财务损失。尽管投资诈骗的手法各式各样&#xff0c;但它们都可以追…...

MyBatis的xml里#{}的参数为null报错、将null作为参数传递报错问题

今天在调试的过程中发现一个bug&#xff0c;把传入的参数写到查询分析器中执行没有问题&#xff0c;但是在程序中执行就报错&#xff1a;org.springframework.jdbc.UncategorizedSQLException : Error setting null parameter. Most JDBC drivers require that the JdbcType m…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...