记录一下vue项目引入百度地图
公共部分
#allmap {
width: 500px;
height: 500px;
font-family: "微软雅黑";
}
1、
<div id="allmap">
<baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</div>
data() {
return {
// 定位位置
center: {lng: 0, lat: 0},
// 地图放大等级
zoom: 3
}
}
methods: {
// 实例对象
handler ({BMap, map}) {
console.log(BMap, map)
// 经度
this.center.lng = 116.404
// 纬度
this.center.lat = 39.915
// 地图放大等级
this.zoom = 15
}
}
2、index.html引入
<script src="http://api.map.baidu.com/api?v=3.0&ak=0MGoqTzESLptR6j6LEmhlDey6ZO53yeZ"></script>
<!-- 以下可选scirpt -->
<script type="text/javascript" src="https://mapopen-pub-jsapigl.bj.bcebos.com/newThree/three.min.js"></script>
<script type="text/javascript" src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.151/dist/mapvgl.min.js"></script>
<script type="text/javascript" src="https://code.bdstatic.com/npm//mapvgl@1.0.0-beta.151/dist/mapvgl.threelayers.min.js"></script>
<script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
mounted () {
var map = new BMap.Map('allmap');
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
3、单页面引入
<div id="allmap"></div>
data() {
return {
ak:'0MGoqTzESLptR6j6LEmhlDey6ZO53yeZ',
script:{type:'',src:''}
}
}
mounted () {
this.$nextTick(function() {
var _this = this;
MP(_this.ak).then(BMap => {
// 百度地图API功能
var map = new BMap.Map("allmap")
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
})
})
}
import {MP} from '@/map.js'
export function MP(ak) {
return new Promise(function (resolve, reject) {
window.onload = function () {
resolve(BMap)
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?ak="+ak+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}
相关文章:
记录一下vue项目引入百度地图
公共部分 #allmap { width: 500px; height: 500px; font-family: "微软雅黑"; } 1、 <div id"allmap"> <baidu-map :center"center" :zoom"zoom" ready"handler"></baidu-map> </div> data()…...
基于Docker官方php:7.4.33-fpm镜像构建支持67个常见模组的php7.4.33镜像
实践说明:基于RHEL7(CentOS7.9)部署docker环境(23.0.1、24.0.2),所构建的php7.4.33镜像应用于RHEL7-9(如AlmaLinux9.1),但因为docker的特性,适用场景是不限于此的。 文档形成时期:2017-2023年 因系统或软件版本不同&am…...
opencv通过轮廓点生成闭合图像
前言 有时候需要将某一些点生成闭合的二值图像。记录一下。 // 轮廓点个数 int nrCurvePoints curContour.nr; // 轮廓点 DIM2DL* curvePoints curContour.pts;std::vector<cv::Point> points; // 轮廓点集合 for (int cntPoint 0; cntPoint < nrCurvePoints; cn…...
Python 网络编程之TCP详细讲解
【一】传输层 【1】概念 传输层是OSI五层模型中的第四层,负责在网络中的两个端系统之间提供数据传输服务主要协议包括**TCP(传输控制协议)和UDP(用户数据报协议)** 【2】功能 **端到端通信:**传输层负责…...
直饮水系统服务认证:提升水质与安全的必要举
直饮水系统作为一种便捷、卫生的饮水方式,已经越来越受到人们的欢迎。然而,随着市场的发展,直饮水系统的质量和服务也面临着一些挑战。因此,直饮水系统服务认证应运而生,成为了提升水质与安全的必要举措。 一、直饮水…...
Qt 调试系统输出报警声以及添加资源
文章目录 前言一、方法1 使用 Qsound1.添加都文件 直接报错2.解决这个错误 添加 QT multimedia3. 加入代码又遇到新的错误小结 二、第二种方法1.引入库2.添加资源2.1依次点击Qt--->Qt Resource File--->Choose2.2给资源文件起个名字,如:res&#…...
Linux下文件的创建写入读取编程
在linux下操作一个文件,首先要保证文件的存在(不存在就创建),接着打开文件(打开成功)并得到文件描述符,接着在进行读写操作,最后还需要关闭文件。如果我们对文件进行读写之后不关闭文…...
python 解析
list(pd.DataFrame) # 所有列名切片:print("显式 切片:\n", df.loc[:, "number":"sum"]) 所有行,列是从number 到sum ,前闭后开print("隐式 切片:\n", df.iloc[:, 1:3]) # 结果和上面一样转化成字典…...
谷歌aab包在Android 14闪退而apk没问题(targetsdk 34)
问题原因 Unity应用(target SDK 34)上线到GooglePlay,有用户反馈fold5设备上(Android14系统)疯狂闪退,经测试,在小米手机Android14系统的版本复现成功了,奇怪的是apk直接安装没问题,而打包成aa…...
34.在排序数组中查找元素的第一个和最后一个位置
34.在排序数组中查找元素的第一个和最后一个位置 给你一个按照非递减顺序排列的整数数组 nums,和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target,返回 [-1, -1]。 你必须设计并实现时间复杂度为…...
js树过滤
// 递归过滤得到每一项的hidden为false的数据 function filterTree(arr) { return arr.filter(item > { if (item.children) { item.children filterTree(item.children) } if (!item.hidden) { return true } }) }...
Java多线程并发篇----第十六篇
系列文章目录 文章目录 系列文章目录前言一、线程等待(wait)二、线程睡眠(sleep)三、线程让步(yield)四、线程中断(interrupt)五、Join 等待其他线程终止前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这…...
测评结果:免费的“文心一言3.5”香,但是付费的产品质量更高
文章目录 前言一、文心一言3.5生成的图片和文章1.文心一言生成的图片在文心一言3.5中输入以下内容:我的测评结果: 2.文心一言生成的文章在文心一言3.5中输入以下内容:我的测评结果: 二、ChatGPT生成的图片和文章1.ChatGPT4.0 生成…...
Matlab GUI设计基础范例(可以一步一步跟着做)
我们要做一个GUI界面,可以选择peaks、membrane和sinc三种三维图数据,选择画出surf、mesh和contour三种图像。 打开GUI 每个版本打开方式可能都不一样,但有一个是相同的,就是在命令行输入guide回车。 绘制控件 大概就绘制成这样…...
@Transactional(rollbackFor = {Exception.class})与 @Transactional区别
在Spring框架中,Transactional 注解用于标记方法或类,以表明该方法或类内包含的数据库操作应当在一个事务中执行。事务的基本原则是“原子性”,即所有操作要么全部成功,要么全部失败。 1. Transactional(不指定 rollb…...
数据结构——二叉树(先序、中序、后序及层次四种遍历(C语言版))超详细~ (✧∇✧) Q_Q
目录 二叉树的定义: *特殊的二叉树: 二叉树的性质: 二叉树的声明: 二叉树的先序遍历: 二叉树的中序遍历: 二叉树的后序遍历: 二叉树的层序遍历: 二叉树的节点个数: 二叉…...
如何快速打造属于自己的接口自动化测试框架
1 接口测试 接口测试是对系统或组件之间的接口进行测试,主要是校验数据的交换,传递和控制管理过程,以及相互逻辑依赖关系。 接口自动化相对于UI自动化来说,属于更底层的测试,这样带来的好处就是测试收益更大ÿ…...
人工智能在数据安全中的应用场景
场景一:数据资产梳理 数据资产梳理是数据安全的基础。知道企业究竟有多少数据,这些数据在哪里?有哪些类型的数据?其中哪些是敏感数据?这些数据的敏感等级分别是什么?只有明确了保护的目标,才能…...
2024.1.16每日一题
LeetCode 2719.统计整数数目 2719. 统计整数数目 - 力扣(LeetCode) 题目描述 给你两个数字字符串 num1 和 num2 ,以及两个整数 max_sum 和 min_sum 。如果一个整数 x 满足以下条件,我们称它是一个好整数: num1 &l…...
python入门,数据容器的通用操作(len,max,min,sorted)
1.len统计容器内元素个数 2.max统计元素最大元素 3.min统计元素最小元素 4.容器的转化功能 list(容器)将给定容器转化为列表 字符串转列表将字符串内的每一个元素都取了出来作为列表的每一个元素 字典则只会取出它的key,value会消失 str&…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
招商蛇口 | 执笔CID,启幕低密生活新境
作为中国城市生长的力量,招商蛇口以“美好生活承载者”为使命,深耕全球111座城市,以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子,招商蛇口始终与城市发展同频共振,以建筑诠释对土地与生活的…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分: 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
c# 局部函数 定义、功能与示例
C# 局部函数:定义、功能与示例 1. 定义与功能 局部函数(Local Function)是嵌套在另一个方法内部的私有方法,仅在包含它的方法内可见。 • 作用:封装仅用于当前方法的逻辑,避免污染类作用域,提升…...
