vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录
引言
1、引用百度地图
2、在项目中使用百度地图
2-1、页面结构部分
2-2、js逻辑部分
3-1、页面结构部分
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它旨在平易近人、灵活且可扩展,重点是声明式渲染和基于组件的架构。Vue 的反应性和可组合性使其成为开发复杂单页应用程序的热门选择。
引言
记录一下vue项目使用百度地图所用的api和踩过的坑,减少以后引用少走弯路。旨在记录,第一次开贴,不足之处请多多指教。废话不多说,开撸!
1、引用百度地图
这里账号密钥不多说,上链接,自己注册。
首先要在你项目的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="external nofollow" 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();}
(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);
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具相关推荐
- html引入百度地图报错,vue引入百度地图BMapGL,或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
- vue引入百度地图BMapGL,获取天地图根据名称显示坐标定位信息
1. 解决提示:解决调用百度地图API弹出提示 "百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥"的方法 百度官网生成ak: https://lb ...
- Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言 要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
- 百度地图之鼠标绘制工具条库(开源库)
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
- 百度地图实现鼠标绘制多边形并获取所有点坐标
百度地图开放平台http://lbsyun.baidu.com/ 这里使用的是Javascript API http://lbsyun.baidu.com/index.php?title=jspopu ...
- Vue项目引用百度地图并实现搜索定位等功能
Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台 给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路 ...
- vue项目引入第三方地图插件并且随机显示坐标点(经纬度),点击坐标点弹出窗口,点击详情文字链接到其他模块
再vue中引入第三方插件-- https://www.npmjs.com/package/vue-baidu-map 一个百度地图的vue封装 上述中的内容在第三方插件的文档介绍中都有. 在具体特性 ...
- vue引入百度地图实现轨迹绘制
引入 cnpm i --save vue-baidu-map main.js import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: 'U ...
- Vue项目使用百度地图api
目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证 进入百度地图开放平台 官网,(认证需要身份证号码,人脸识别,手机百度APP,邮箱地址) 注册登录完 ...
最新文章
- 基础练习 字符串对比
- Shell与ShellScript
- Appium 移动端自动化 - Android SDK连接安卓手机,adb连接一加8手机USB调试实例演示,连接一加8手机不显示USB调试选项问题排查
- 单片机模块学习之数码管
- Visual Studio 10将面世 微软走得太快?
- python画椭圆形_手残党福音:用Python画出机器人Dev
- 如果数组最后一项为空删除最后一项和去前面的逗号_手写数组方法
- Homebrew:无法符号链接,/ usr / local / bin不可写[关闭]
- c++十六进制转十进制_二、八、十、十六进制转换不用计算,Excel 进制转换函数大全奉上...
- 【论文翻译笔记】A Systematic Evaluation of StaticAPI-Misuse Detectors
- word中 设置标题级别 的 快捷键
- 解决安装office2007的各种工具时提示“安装程序找不到office.zh-cn/*”的问题
- android 广告库sdk,秒针移动广告投放Android SDK集成指南
- 计算机中常用术语CAD是指,计算机常用术语CAD的含义是
- C++手动开启O2、O3优化略
- Android开发之Webview中原生与JS交互
- Golang 协程顺序打印
- 朋友圈如何秀一把!用Python一键生成炫酷九宫格图片!
- 小甲鱼汉诺塔代码理解
- 解决微信小程序无法访问后台服务器问题
热门文章
- 初尝vue-element-admin
- python用turtle画字母n、h_详解python使用turtle库来画一朵花
- 考研英语词汇(部分)快速记忆
- 微信分享与支付开发详解
- CSS学习笔记 10.字体
- Word格式处理控件Aspose.Words for .NET教程——设置字体格式并获取行距
- 看这,苹果手机怎么录音的3个方法!
- 图形编辑器:拖拽阻塞优化
- day27-API-java流的三大分类,常用的流(文件流,对象流, 缓冲流, 转换流, PW)
- 两天赚 2 千,用 Python 接私活,真香!