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代理链接: 瓦片下载器,具体存放在哪里后台实现。
这就是前端百度离线地图的实现方法,希望能帮到相同需求的人,同时哪里不对地方也希望多多指点!