vue项目实现百度离线地图开发

vue项目结合百度离线地图开发

百度地图（布标记点，标记点聚合，标记点详情，标记点轨迹）

注意：标记点和详情弹框以及点的轨迹图没有展示出来，没数据没办法！！！！！

第一步
首先下载好百度离线地图包，解压好的文件放在指定目录下public。
第二步
然后在public目录下的index.html引入离线地图所需的文件。
第三步
接着就是地图展示的主要代码

<template><div class="app-container"><el-row :gutter="24"><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"><div class="head-container"><divid="map"class="baiduMap"></div><el-tooltip content="刷新地图" placement="bottom"><el-button class="refresh" type="primary" icon="el-icon-refresh" size="mini" circle @click="onClickRefreshMap"></el-button></el-tooltip></div></el-col></el-row></div>
</template><script>
export default {name: "MapShows",components: {},data() {return {markerArr: [],orgId: "",map: null,dataListShow: false,polyline: null,formInline: {planCode: "",workTaskName: "",},centrePoint: []};},created() {},mounted() {this.getMapZfysByOrgId();},methods: {getMapZfysByOrgId() {this.$api.getMxxxxxxxrgIds().then((response) => {this.markerArr = response;this.initMap();});},initMap() {let self = this;//初始化坐标点信息this.$api.getAllBxxxxxxxionaryName("MapSetting").then((response) => {// 获取系统地图参数设置var markersArr = [];const mapSetting = response.items;let defaultCenterX = 87.36,defaultCenterY = 43.45,defaultLevel = 12,maxLevel = 16,minLevel = 4;mapSetting.forEach((m) => {if (m.label == "默认中心点" && m.value) {let point = m.value.split(";");defaultCenterX = parseFloat(point[0]);defaultCenterY = parseFloat(point[1]);} else if (m.label == "默认层级" && m.value) {defaultLevel = parseInt(m.value);} else if (m.label == "最大层级" && m.value) {maxLevel = parseInt(m.value);} else if (m.label == "最小层级" && m.value) {minLevel = parseInt(m.value);}});this.$nextTick(() => {self.map = new BMap.Map("map", {mimZoom: minLevel,maxZoom: maxLevel,}); //写入地图div的id名称var point = new BMap.Point(defaultCenterX, defaultCenterY); // 创建点坐标，（我这里是根据后台返回的坐标点数据，然后进行初始化数据回填），也可以默认写死一个坐标点。self.map.centerAndZoom(point, defaultLevel); // 初始化地图，设置中心点坐标和地图级别self.map.enableScrollWheelZoom();self.map.enableScrollWheelZoom(true); // 激活滚轮操作self.map.addControl(new BMap.MapTypeControl({//添加地图类型控件mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));  self.map.setMapType(BMAP_HYBRID_MAP);//设置卫星地图//添加控件var ctrlNav = new window.BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE,});self.map.addControl(ctrlNav); //缩放var ctrlOva = new window.BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,isOpen: 1,});self.map.addControl(ctrlOva); //缩略图var ctrlSca = new window.BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT,});self.map.addControl(ctrlSca); //比例尺self.markerArr.forEach((e, i) => {// 创建point, 将x,y值传入let pointNumber = new BMap.Point(e.longitude, e.latitude);let deviceCode = e.deviceCode;// 创建信息窗口对象  new window.BMap.InfoWindow("<p style='font-size:12px;line-height:1.8em;'" + this.markerArr[i].name + "</br>地址：" + this.markerArr[i].name + "</br> 电话：" + this.markerArr[i].tel + "</br> 联系人：" + this.markerArr[i].name+"</p>");//悬浮提示信息// let infoWindow =  new window.BMap.InfoWindow("<p style='font-size:12px;line-height:1.8em;'" + this.markerArr[i].name + "</br>地址：" + this.markerArr[i].name + "</br> 电话：" + this.markerArr[i].tel + "</br> 联系人：" + this.markerArr[i].name+"</p>");//悬浮提示信息// 将data中的name加入地图中var label = new BMap.Label(e.name, {offset: new BMap.Size(0, -16),});//标记点的文本显示label.setStyle({ color : "#fff", //字体颜色fontSize : "16px",//字体大小 　　backgroundColor : e.isOnline?"#1890FF" : "#cccc", //文本标注背景颜色，我这里的isOnline是后台返回的标注点在线还是不在线的判断，根据你的实际业务来border : "none", 　　// 　　fontWeight :"bold" //字体加粗});//根据业务来显示标记点的图片效果显示，需要更换图片let imgSrc = self.taskLevleIconClassLt(e.taskLevel)//标记点显示框大小控制var myIcon = new BMap.Icon(imgSrc, new BMap.Size(30, 60));markerFun(pointNumber, label, deviceCode, myIcon);});function markerFun(points, label, deviceCode, myIcon) {console.log(points, "points");let markers = new BMap.Marker(points, { icon: myIcon });markers.enableDragging();//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。// var markerClusterer = new BMapLib.MarkerClusterer(self.map, {markers: markers});// self.map.addOverlay(markers);  // 将标注添加到地图中markers.setLabel(label); // 将data中的name添加到地图中label.setStyle({// 设置label的样式color: "#fff",fontSize: "14px",border: "none",borderRadius: "5px"});var curve = new BMapLib.CurveLine(points, {strokeColor: "blue",strokeWeight: 3,strokeOpacity: 0.5,}); //创建弧线对象self.map.addOverlay(curve); //添加到地图中// 标注的点击事件markers.addEventListener("click", function (event) {self.getZfyDetail(deviceCode, points);});// self.map.addOverlay(markers);  // 将标注添加到地图中markersArr.push(markers);self.map.addOverlay(markers); if(self.centrePoint.length > 0) {self.map.setViewport(self.centrePoint);}}//点聚合的实现let markerClusterer = new window.BMapLib.MarkerClusterer(self.map, {markers: markersArr,styles: [{url: require("../../../assets/image/map/quyu1.png"), //点聚合图标背景图size: new BMap.Size(27, 43), //点聚合图标大小textColor: "#fff",},],});});});},//根据名称显示不一样的标注点图片（我这里用了动态图）taskLevleIconClassLt(name) {switch (name) {case '1': return require("../../../assets/image/map/1.gif");case '2': return require("../../../assets/image/map/2.gif");case '3': return require("../../../assets/image/map/3.gif");case '4': return require("../../../assets/image/map/4.gif");default: return require("../../../assets/image/map/5.gif");}},getZfyDetail(deviceCode, points) {let that = this;let infoWindow = null;let dtailObj = null;this.$api.getZfxxxxxxxxail(deviceCode).then((response) => {dtailObj = response;var opts = {width: 700, // 信息窗口宽度height: 220,title: "设备详情", // 信息窗口标题};infoWindow = new window.BMap.InfoWindow("<div style='display:flex;flex-wrap: wrap;'>" +"<div style='width:50%'><p><span>文本2：</span><span>" +(dtailObj.lastPowerOnTime || "") +"</span></p></div>" +"<div style='width:50%'><p><span>文本3：</span><span>" +(dtailObj.lastPowerOffTime || "") +"</span></p></div>" +"<div style='width:50%'><p><span>文本4：</span><span>" +(dtailObj.storeInfo || "") +"</span></p></div>" +"<div style='width:50%'><p><span>文本5：</span><span>" +(dtailObj.recordStatus || "") +"</span></p></div>" +"<div style='width:50%'><p><span>文本6：</span><span>" +(dtailObj.powerInfo || "") +"</span></p></div>" +"<div style='width:50%'><p><span>文本7：</span><span>" +(dtailObj.workTaskName || "") +"</span></p></div>" +"<div style='width:50%'><a id='joblist' class='gdClick' data-devicecode='" +dtailObj.deviceCode +"' name='box'>轨迹<span class='deviceCode' hidden>" +dtailObj.deviceCode +"</span></a></div>" +"<div style='width:50%'><a id='joblist1' class='clear_path' data-devicecode='" +dtailObj.deviceCode +"' name='box'>清除轨迹<span class='deviceCode' hidden>" +dtailObj.deviceCode +"</span></a></div></div>",opts); //悬浮提示信息this.map.openInfoWindow(infoWindow, points);this.$nextTick(() => {setTimeout(() => {// 点详情轨迹点击事件document.getElementsByClassName("gdClick")[0].addEventListener("click", function (ev) {let deviceCode = $(this).data("devicecode");//获取当前点轨迹的数据that.$api.getZfxxxxxxxxxocus(deviceCode).then((response) => {if (that.polyline != null) {var allOverlay = that.map.getOverlays();for (var i = 0; i < allOverlay.length; i++) {if (allOverlay[i].toString().indexOf("Label") > 0) {//删除折线that.map.removeOverlay(allOverlay[i]);}if (allOverlay[i].toString().indexOf("Polyline") > 0) {//删除折线that.map.removeOverlay(allOverlay[i]);}}}let zfyDayLocusList = response;let pointNumber = [];var label = null;zfyDayLocusList.forEach((e, i) => {// 创建point, 将x,y值传入let pointNum = new BMap.Point(e.longitude, e.latitude);pointNumber.push(pointNum);//轨迹时间label = new BMap.Label(e.updateTime, {// 创建文本标注position: { lng: e.longitude, lat: e.latitude ,title: "gj"}, // 设置标注的地理位置offset: new BMap.Size(10, 20), // 设置标注的偏移量});that.map.addOverlay(label);label.setStyle({// 设置label的样式color: "#44cef6",fontSize: "12px",border: "none",});});// 画图标// for (var i = 0, j = pointNumber.length; i < j; i++) {//     var marker = new BMap.Marker(pointNumber[i], {//         icon: icon,//         offset: offset//     }); // 创建标注//     map.addOverlay(marker);// }console.log(pointNumber)that.polyline = new BMap.Polyline(pointNumber, {strokeColor: "blue",strokeWeight: 6,strokeOpacity: 0.5,});that.map.addOverlay(that.polyline);var allOverlay = that.map.getOverlays();console.log(allOverlay)});});//清除轨迹点击事件document.getElementsByClassName("clear_path")[0].addEventListener("click", function (ev) {var allOverlay = that.map.getOverlays();// that.map.removeOverlay(allOverlay[allOverlay.length-1]);for (var i = 0; i < allOverlay.length-1; i++){if("point" in allOverlay[i]) {if (allOverlay[i].point!=null && allOverlay[i].point != {}) {if(allOverlay[i].point.title == "gj" && 'title' in allOverlay[i].point){that.map.removeOverlay(allOverlay[i]);that.map.removeOverlay(allOverlay[allOverlay.length-1]);}}} }});}, 500);});});},//刷新地图onClickRefreshMap() {this.centrePoint = [];this.getMapZfysByOrgId();}},
};
</script><style lang="scss" scoped>
/*引入地图样式*/
@import url("../../../../public/baiduMap/css/baidu_map_v2.css");
.app-container {padding: 0px;
}
.baiduMap{height: 820px;overflow-y: auto;
}
::v-deep p {margin: 8px 0;
}
::v-deep a:hover {color: red;background: #fff;text-decoration: none;
}
::v-deep a {color: #0066cc;text-decoration: underline;
}
::v-deep .el-icon-video-camera {color: #0066cc;margin-left: 10px;
}
::v-deep .el-icon-video-camera:hover {color: red;margin-left: 10px;
}
//隐藏百度地图左下角图标和文字
::v-deep .anchorBL a{display: none;
}::v-deep .anchorBL img{display: none;
}::v-deep .anchorBL span{display: none!important;
}</style>

第四步
注意事项：如果内网项目地图展示要提前下载好地图瓦片数据，还有就是别把瓦片数据也放在public里，因为vue项目在build打包的时候也会将其打包进去，就会造成打包非常慢还有包非常之大，建议内网项目把瓦片数据存放在项目外，瓦片做nginx代理链接: 瓦片下载器，具体存放在哪里后台实现。

这就是前端百度离线地图的实现方法，希望能帮到相同需求的人，同时哪里不对地方也希望多多指点！

vue项目实现百度离线地图开发相关推荐

web百度离线地图开发（详细教程）2019
web百度离线地图开发(详细教程) 需求情景主要参考开发步骤一.JS API文件下载二.修改API文件 1.屏蔽ak验证 2.设置引用本地资源路径 3.下载本地资源 4.引用本地资源三.加载 ...
百度离线地图开发，node实现地图瓦片下载
最近有个Web项目要用离线地图,项目是在内网环境,找了很多资料,踩了很多坑,好在已经实现了,下面把资料整理一下. 首先是百度离线地图开发包,原文地址是http://www.xiaoguo123.com ...
【web百度离线地图开发】原生实现百度地图离线版速览
需求如下,在基于在线地图的基础上展现离线地图 //在线用以下插件展示"vue-baidu-map": "^0.21.22", vue中展示离线地图第一步:把配 ...
百度离线地图开发教程？
离线地图分为两种:一种叫"金字塔瓦片"数据,一种叫"矢量地图数据".我们看的在线地图比如,百度,谷歌,高德等等网页上的地图,都是金字塔瓦片:另外一种是手机上用来 ...
LINUX系统下部署百度离线地图开发API
Bigemap离线地图发布服务器 for Linux SDK下载地址:http://www.bigemap.com/reader/download/detail2019041117.html 当前版本 ...
vue2+百度离线地图实现多车辆行驶动态轨迹
vue2+百度离线地图实现行驶多车辆动态轨迹实现多多车辆实时轨迹监控,每个10秒监测一次接口,进行动态追加.(前端实现,如果数量庞大的车辆移动,很消耗性能) 百度离线地图引入方法查看: vue项目实 ...
vue整合百度离线地图api3.0
文章目录前言一.场景二.操作步骤 1.引入3.0js文件 2.创建map_load.js 3.修改bmap_offline_api_v3.0_min.js文件 3.1屏蔽ak验证 3.2加载mo ...
离线地图开发下实现GPS定位，坐标纠偏回放，偏离路线
一.GPS坐标转换(通过离线算法调用,各类坐标系之间的转换) GPS设备标准坐标采用WGS-84坐标系或北斗导航,需要通过坐标系之间转换才能准确定位到地图上,通过js接口算法函数可简单实现坐标系之间的 ...
百度离线地图WMS/WMTS服务
百度离线地图开发主要有两部分组成:1.获取离线地图数据:因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用:2.离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apac ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...

vue项目实现百度离线地图开发

vue项目结合百度离线地图开发

vue项目实现百度离线地图开发相关推荐

最新文章

热门文章