位置: IT常识 - 正文

vue项目引入百度地图BMapGL和BMap实例,以及辅助工具BMapGLLib 的引入,BMapGL鼠标绘制功能(vue引入mui)

编辑:rootadmin
vue项目引入百度地图BMapGL和BMap实例,以及辅助工具BMapGLLib 的引入,BMapGL鼠标绘制功能 记录一下vue项目使用百度地图所用的api和踩过的坑,减少以后引用少走弯路。旨在记录,第一次开贴,不足之处请多多指教。废话不多说,开撸!1、引用百度地图

推荐整理分享vue项目引入百度地图BMapGL和BMap实例,以及辅助工具BMapGLLib 的引入,BMapGL鼠标绘制功能(vue引入mui),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue引入mui,vue跳转到百度,vue引入百度api,vue项目引入elementui,vue项目引入百度地图,vue项目引入百度地图,vue项目引入elementui,vue引入百度api,内容如对您有帮助,希望把文章链接给更多的朋友!

这里账号密钥不多说,上链接,自己注册。

首先要在你项目的index.html里面加上以下代码: 这个是BMap

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

这个是BMapGL

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

如果需要使用辅助工具BMapGLLib ,还得把以下两个也放入

<link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet"><script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>2、在项目中使用百度地图2-1、页面结构部分

(1)创建地图容器元素

<div class="map-body" :id="mapId"></div>

(2)设置容器样式大小

.map-body { position: relative; height: 500px; border: 1px solid #dcdfe6;}2-2、js逻辑部分

(1)创建地图实例

createMap(lgt, lat) { // this.maploading=true; this.map = new BMapGL.Map(this.mapId, { enableMapClick: false }) // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度) this.map.centerAndZoom(new BMapGL.Point(lgt, lat), 11) // 初始化地图,设置中心点坐标和地图级别 this.map.enableScrollWheelZoom(true)// 开启鼠标滚轮缩放 },

(2)把地图赋值给全局变量,方便后续使用

data() { return { map: "", mapId: "", //我这里采用了动态id这个不是必须的,看自己需求来 } created() { this.mapId = 'map' + new Date().getTime();vue项目引入百度地图BMapGL和BMap实例,以及辅助工具BMapGLLib 的引入,BMapGL鼠标绘制功能(vue引入mui)

(3)设置中心点坐标 这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。(为天安门坐标)

const point = new BMapGL.Point(116.404, 39.915);

注意: 在使用百度地图JavaScript API服务时,需使用百度BD09坐标,如使用其他坐标( WGS84、GCJ02)进行展示,需先将其他坐标转换为BD09,详细说明请参考坐标转换说明,请勿使用非官方的转换方法。

(4)地图初始化

created() { this.mapId = 'map' + new Date().getTime(); const point = new BMapGL.Point(116.404, 39.915); //创建地图 this.$nextTick(() => { this.createMap(point.lng, point.lat); }) },

到现在为止,百度地图就在你页面上创建成功了。 附图片:

3、在项目中使用百度地图辅助工具BMapGLLib

现在的需求就是需要在页面上标注点,画矩形,圆形的一些标注线。百度地图的辅助工具就刚好自带了这两个功能。

3-1、页面结构部分

(1)辅助工具栏html结构和css样式

<ul class="drawing-panel"> <li class="bmap-btn bmap-marker" @click="draw('marker')" :style="{ 'background-position-y': actNav === 'marker' ? '-52px' : '0px' }"></li> <li class="bmap-btn bmap-polyline" @click="draw('polyline')" :style="{ 'background-position-y': actNav === 'polyline' ? '-52px' : '0px' }"></li> <li class="bmap-btn bmap-rectangle" @click="draw('rectangle')" :style="{ 'background-position-y': actNav === 'rectangle' ? '-52px' : '0px' }"></li> <li class="bmap-btn bmap-polygon" @click="draw('polygon')" :style="{ 'background-position-y': actNav === 'polygon' ? '-52px' : '0px' }"></li> <li class="bmap-btn bmap-circle" @click="draw('circle')" :style="{ 'background-position-y': actNav === 'circle' ? '-52px' : '0px' }"></li> </ul>.drawing-panel { z-index: 999; position: absolute; top: 14rem; margin-left: 2.5rem; padding-left: 0; border-radius: .25rem; height: 47px; box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);}.bmap-btn { border-right: 1px solid #d2d2d2; float: left; width: 64px; height: 100%; background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png); cursor: pointer;}.drawing-panel .bmap-marker { background-position: -65px 0;}.drawing-panel .bmap-polyline { background-position: -195px 0;}.drawing-panel .bmap-rectangle { background-position: -325px 0;}.drawing-panel .bmap-polygon { background-position: -260px 0;}.drawing-panel .bmap-circle { background-position: -130px 0;}

结构搭完效果如下:

3-2、js逻辑部分

上面地图初始完后就能使用鼠标绘制工具进行需求的绘制 (1)实例化鼠标绘制工具

draw(drawingType) { console.log(drawingType, '666') this.actNav = drawingType /**这里看需求可以把它设置为全局变量。 *我这里需求需要,故设置了全局变量,以下代码就注释掉了*/ // const styleOptions = { // strokeColor: '#5E87DB', // 边线颜色 // fillColor: '#5E87DB', // 填充颜色。当参数为空时,圆形没有填充颜色 // strokeWeight: 2, // 边线宽度,以像素为单位 // strokeOpacity: 1, // 边线透明度,取值范围0-1 // fillOpacity: 0.2 // 填充透明度,取值范围0-1 // }; // const labelOptions = { // borderRadius: '2px', // background: '#FFFBCC', // border: '1px solid #E1E1E1', // color: '#703A04', // fontSize: '12px', // letterSpacing: '0', // padding: '5px' // }; // 实例化鼠标绘制工具 const drawingManager = new BMapGLLib.DrawingManager(this.map, { //isOpen: true, // 是否开启绘制模式 enableCalculate: false, // 绘制是否进行测距测面 enableSorption: true, // 是否开启边界吸附功能 sorptiondistance: 20, // 边界吸附距离 circleOptions: this.styleOptions, // 圆的样式 polylineOptions: this.styleOptions, // 线的样式 polygonOptions: this.styleOptions, // 多边形的样式 rectangleOptions: this.styleOptions, // 矩形的样式 labelOptions: this.labelOptions, // label样式 }) // 进行绘制 if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) { drawingManager.close(); } else { drawingManager.setDrawingMode(drawingType); drawingManager.open(); } /** 我这里需求是圆形和矩形还有点的标注, *还有两种就没有写它的监听事件,也是差不多的, *可以对照一下官方api和我写的就基本上差不多了, *如果有谁需要,我有时间也可以继续把剩下两种监听事件补上 */ // 监听事件 if (drawingType == 'rectangle') { // 监听矩形绘制完成事件 drawingManager.addEventListener("overlaycomplete", (e) => { // 获取矩形对象 const rectangle = e.overlay; // 获取矩形的四个顶点 const points = rectangle.getPath(); console.log(points, "顶点"); this.scope_point = points; }); } else if (drawingType == 'circle') { // 监听圆形绘制完成事件 drawingManager.addEventListener("overlaycomplete", (e) => { // 获取圆形对象 const circle = e.overlay; // 获取圆形的圆心 const center = circle.getCenter(); console.log(center, "圆心"); // 获取圆形的半径 const radius = circle.getRadius(); console.log(radius, "半径"); this.scope_point = center; this.scope_radius = radius; }); } else if (drawingType == 'marker') { drawingManager.addEventListener("overlaycomplete", (e) => { // 获取标注对象 const marker = e.overlay; // 获取标注的经纬度坐标 this.point = marker.getPosition(); // 创建地理编码服务实例 const geocoder = new BMapGL.Geocoder(); // 将经纬度坐标解析为地址信息 geocoder.getLocation(this.point, (result) => { this.newForm.address = result.address; console.log(this.point, result.address, "地址"); }); }); } },

效果如图所示(我只需要这三种,其他注释掉了):

4、在项目中使用BMap实例

注意: 大坑来啦!!! BMapGL 类创建的地图实例不支持 addOverlay 方法,并且还不支持直接使用鼠标绘制工具(BMapLib.DrawingManager 类)在地图上绘制矩形框,故只能换成BMap)写完才知道,只能硬着头皮往下写,因为我需要展示出刚刚画的那些标注。。。 (1)重新初始化一个地图实例(BMap)

this.map = new BMap.Map(this.mapId, { enableMapClick: false }); this.map.centerAndZoom(new BMap.Point(point_location[1], point_location[0]), 11) // 初始化地图,设置中心点坐标和地图级别我这里的point_location是后台返回的坐标,跟上面的类似 this.map.enableScrollWheelZoom(true)// 开启鼠标滚轮缩放

(2)创建标记点

// 创建标记点的坐标const point = new BMap.Point(point_location[1], point_location[0]);//point_location后台返回字段console.log(point, "坐标")// 创建标记点对象const marker = new BMap.Marker(point);// 将标记点添加到地图上this.map.addOverlay(marker);

(3)创建矩形框对象

// 创建矩形框对象 const rectangle = new BMap.Polygon([ new BMap.Point(this.rectangle[3], this.rectangle[2]), //rectangle后台返回的坐标 new BMap.Point(this.rectangle[5], this.rectangle[4]), new BMap.Point(this.rectangle[7], this.rectangle[6]), new BMap.Point(this.rectangle[9], this.rectangle[8]), ], this.styleOptions); //styleOptions之前的全局变量 // 将矩形框添加到地图上 this.map.addOverlay(rectangle); // 设置地图视野,使得矩形框完全显示在地图视野内 this.map.setViewport(rectangle.getPath());

(4)创建圆形对象

// 创建圆心坐标 const center = new BMap.Point(this.rectangle[1], this.rectangle[0]);//rectangle后台返回的圆形坐标 // 创建圆形标注对象 const circle = new BMap.Circle(center, this.scope_radius, this.styleOptions); // 将圆形标注添加到地图上 this.map.addOverlay(circle);5、打完收工,下班!!!
本文链接地址:https://www.jiuchutong.com/zhishi/289821.html 转载请保留说明!

上一篇:前端如何将静态页面部署到服务器,并可以通过公网ip访问。(前端静态页面)

下一篇:PHP更安全的密码加密机制Bcrypt详解(php密码修改)

  • 抖音火山账号怎么变成抖音号(抖音火山账号怎么登录抖音)

    抖音火山账号怎么变成抖音号(抖音火山账号怎么登录抖音)

  • vivo变形器移除了怎么调出来(vivo手机变形器移除了怎么恢复)

    vivo变形器移除了怎么调出来(vivo手机变形器移除了怎么恢复)

  • 公众号爆文是什么意思(微信公众号爆文)

    公众号爆文是什么意思(微信公众号爆文)

  • 网口亮橙灯怎么修复(网口灯橙色闪烁特别快)

    网口亮橙灯怎么修复(网口灯橙色闪烁特别快)

  • 为什么朋友圈发五福别人看不到(为什么朋友圈发文字会被折叠)

    为什么朋友圈发五福别人看不到(为什么朋友圈发文字会被折叠)

  • 京豆一次最多能用多少(京豆一天能刷多少)

    京豆一次最多能用多少(京豆一天能刷多少)

  • 蓝牙键盘怎么充电(蓝牙键盘充一次电能用多久)

    蓝牙键盘怎么充电(蓝牙键盘充一次电能用多久)

  • qq已被暂时冻结会自动解封吗(qq已被暂时冻结一天会自动解封吗)

    qq已被暂时冻结会自动解封吗(qq已被暂时冻结一天会自动解封吗)

  • ipv6网络是什么意思(ipv6网络是啥)

    ipv6网络是什么意思(ipv6网络是啥)

  • 微信申诉次数上限(微信申诉次数上限多少次)

    微信申诉次数上限(微信申诉次数上限多少次)

  • ppt飞入怎么设置(ppt飞入怎么设置方向)

    ppt飞入怎么设置(ppt飞入怎么设置方向)

  • pp视频会员是什么(pp视频会员是什么软件)

    pp视频会员是什么(pp视频会员是什么软件)

  • wps删除多余空白行(Wps删除多余空白行列)

    wps删除多余空白行(Wps删除多余空白行列)

  • 所选内容无效怎么处理(word所选内容无效是怎么回事)

    所选内容无效怎么处理(word所选内容无效是怎么回事)

  • 快手怎么关闭猜你喜欢(快手,一键取关)

    快手怎么关闭猜你喜欢(快手,一键取关)

  • 音响和音箱的区别(音响和音箱的区别,选择适合你的)

    音响和音箱的区别(音响和音箱的区别,选择适合你的)

  • 滴滴快车怎样订往返(怎样订滴滴打车)

    滴滴快车怎样订往返(怎样订滴滴打车)

  • 怎样查看坦白说对方是谁(怎么看坦白说记录)

    怎样查看坦白说对方是谁(怎么看坦白说记录)

  • 快手九宫格视频怎么弄(快手上九宫格的视频怎么弄的)

    快手九宫格视频怎么弄(快手上九宫格的视频怎么弄的)

  • xbox可以卸载吗(联想xbox可以卸载吗)

    xbox可以卸载吗(联想xbox可以卸载吗)

  • 华为m5能连接投影仪吗(华为m5怎么和手机连接)

    华为m5能连接投影仪吗(华为m5怎么和手机连接)

  • 如何把WPS中的表格转换成文本(如何把wps中的表格变大)

    如何把WPS中的表格转换成文本(如何把wps中的表格变大)

  • 手机膜怎么撕下来(手机膜怎么撕下来 钢化)

    手机膜怎么撕下来(手机膜怎么撕下来 钢化)

  • 58同城如何修改简历(58同城如何修改房源信息)

    58同城如何修改简历(58同城如何修改房源信息)

  • 白条和花呗一样吗(京东白条可以借款吗)

    白条和花呗一样吗(京东白条可以借款吗)

  • 不到10G的Win10纯净精简版 干净稳定(win10 100g不够)

    不到10G的Win10纯净精简版 干净稳定(win10 100g不够)

  • mysql hash分区是什么(mysql分区实现)

    mysql hash分区是什么(mysql分区实现)

  • 股票印花税是多少最新
  • 期末账项调整的基础是
  • 防伪开票系统技术维护费怎么做分录
  • 其他现代服务税目包括哪些内容
  • 外贸企业出口销售通常采用
  • 装饰设计事务所平面图
  • 复合肥生产企业排名
  • 个人承包承租转包转租取得的所得
  • 物流企业差额征税
  • 招标代理专家费由谁支付
  • 广告制作费可以计入印刷费吗
  • 预交增值税附加税费减免吗
  • 非独立核算分公司个税怎么申报
  • 个体户缴纳个人经营所得税分录
  • 小微企业免征增值税优惠
  • 公司与政府协议
  • 未抵扣的进项税可以留底多久
  • 财务内账外账的优缺点
  • 汇算清缴做完还能改账么
  • 收取赔偿金开具什么发票
  • 财务费用为什么会出现负数
  • 采购过程中产生的物流成本案例分析
  • 英雄联盟符文推荐怎么不弹出来
  • 腾讯手游助手怎么卸载
  • 水土保持补偿费收费依据
  • php 抓取别的网站的内容
  • 电子缴税回单在哪里打印
  • icon files
  • 先开票后发货开票时确认收入
  • 实物折扣例题
  • linux bsub
  • windows 阅读软件
  • phppost带cookie提交
  • 金融业营业税税率
  • php 使用 AWS kinesis
  • react中路由有哪些常用组件
  • 红字专用发票开具的规定
  • uniapp零基础小白到项目实战
  • 企业如何利用期货对冲风险怎么操作
  • 员工出国公司要承担的责任
  • 非正常损失的原材料进项税额可以抵扣吗
  • sql group by
  • mysql基础操作命令
  • 土地使用权的界定
  • 全年一次性奖金税率表2023最新
  • 营业外收入月末怎么处理
  • 土地出让金返还比例是多少
  • 逾期的押金收入
  • 个人的钱转到公司账上
  • 营业外收入记入企业的什么
  • 企业的应付职工薪酬属于流动负债
  • 暂估成本比实际高分录
  • 购买机器的会计分录
  • 随同产品销售不单独计价包装物如何进行账务处理?
  • 会计利润和税务利润的差异是什么
  • sqlserver锁表是什么意思
  • 品牌笔记本电脑排行
  • windows xp怎么打开
  • win xp 添加网络打印机
  • vs 2008
  • vmmem进程是什么
  • xp系统怎么找回删除的文件
  • linux系统怎么增大磁盘io
  • windows10预览版是什么
  • win10系统无线网络连接在哪
  • 炉石传说用什么开发的
  • cocos2dx 2.2.2
  • 自动断开网络共享怎么办
  • dos命令查看
  • 使用筷子就餐会不会传染乙肝病毒
  • koa nodejs
  • 解决口苦的最佳方法
  • ui课程入门
  • JavaScript For...In 使用方法
  • Android Listview addHeaderView setadapter的时候莫名NullPointerException 解决
  • python asyncio await
  • 云南省电子税务局怎么改号码
  • 费减备案合格后怎么操作?
  • 汽车销售环节要做什么
  • 劳务派遣工为什么没年假了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设