循环输出BMap.Marker标记

要在地图上循环输出标记并给标记添加click事件,如果使用如下代码则所有标记被点击后infowindow输出的信息是一样的都是:考勤日期10,i 的值一直会是10

先看错误代码:

	result = [...];//比如有10个数据
	for(var i=0;i<result.length;i++){
		var marker = new BMap.Marker(new BMap.Point(result[i].coordx, result[i].coordy)); 
		var date = result[i].date;
		marker.addEventListener("click", function(e){
			var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>考勤日期"+ i + "</p>");
			this.openInfoWindow(infoWindow);
			});
		map.addOverlay(marker);  
    } 

再看看正确的代码:

	result = [...];
  	for(var i=0;i<result.length;i++){
		var marker = new BMap.Marker(new BMap.Point(result[i].coordx, result[i].coordy));   
		var date = result[i].date;
		(function(){
			var index = i;
			marker.addEventListener("click", function(e){
				var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>考勤日期"+ index + "</p>");
				this.openInfoWindow(infoWindow);
				});
		})();
		map.addOverlay(marker);  
    } 

这里用到了js的一个特性:闭包,什么是闭包呢?可以参考http://hi.baidu.com/infol/item/edaef3d2b91eddfdca0c392b 这篇文章,讲的很详细。这里主要强调当看到闭包的时候,可以用对象的方式去理解。

接下来分析一下上面两段代码,主要用到两个概念(1)作用域(2)变量生命周期:

for 循环里面是一个作用域这里相当与外围作用域,通过marker.addEventListener绑定的事件函数里面也有个作用域,由于后一个作用域里面引用了前一个作用域里声名的变量,导致循环完成后 i 没有被释放,一直存在于内存中。当我们触发单击事件的时候,循环早已经完成,此时的 i 的值是10。所以才会发生所有Infowindow的值都是:考勤日期10

第二段代码里把事件函数用(function(){...});匿名函数包围起来,相当于增加了一层作用域,我们知道匿名函数外面加括号相当于一个表达式,而表达式里面声名的变量在表达式结束后就释放了,所以能够取到正确的值。

 

 

 



 


 

<dependency> <groupId>com.taosdata.jdbc</groupId> <artifactId>taos-jdbcdriver</artifactId> <version>3.2.4</version> </dependency><template> <div> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" style="height:9.45rem;width: 100%;" :scroll-wheel-zoom="true" > <div class="drawing-panel"> <el-date-picker v-model="startTime" type="datetime" placeholder="开始时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" class="time-picker" /> <el-date-picker v-model="endTime" type="datetime" placeholder="结束时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" class="time-picker" /> <el-button type="primary" @click="searchConfirm">查询</el-button> <button class="btn" @click="play(1)">播放</button> <button class="btn" @click="play(2)">暂停</button> </div> </baidu-map> </div> </template> <script> export default { name: 'BtAddrBaiDu', data() { return { startTime: null, endTime: null, center: { lng: 114.085947, lat: 22.547 }, zoom: 15, gpsArr: [ { lng: 114.000069, lat: 22.500069 }, ], speed: 500, lushu: null, batteryId: "", mapInstance: null, BMap: null, bMapLib: null }; }, mounted() { // 从父组件获取电池ID this.batteryId = "电池编号:" + this.$parent.$children[0].hwid; }, methods: { searchConfirm() { if (!this.mapInstance) { console.error('地图尚未初始化'); return; } this.loadData(); }, // 地图初始化回调 handler({ BMap, map }) { this.BMap = BMap; this.mapInstance = map; this.bMapLib = window.BMapLib; // 从全局获取BMapLib // 初始化地图设置 map.enableScrollWheelZoom(true); map.centerAndZoom(new BMap.Point(114.085947, 22.547), 15); // 添加控件 map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMap.ANCHOR_BOTTOM_RIGHT })); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl({ anchor: BMap.ANCHOR_TOP_LEFT })); map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP], anchor: BMap.ANCHOR_TOP_RIGHT })); // 修改LuShu原型(只需一次) this.bMapLib.LuShu.prototype._move = function(initPos, targetPos, effect) { var pointsArr = [initPos, targetPos]; var me = this, currentCount = 0, timer = 10, step = this._opts.speed / (1000 / timer), init_pos = this._projection.lngLatToPoint(initPos), target_pos = this._projection.lngLatToPoint(targetPos), count = Math.round(me._getDistance(init_pos, target_pos) / step); this._map.addOverlay( new BMap.Polyline(pointsArr, { strokeColor: "#111", strokeWeight: 3, strokeOpacity: 0.5 }) ); if (count < 1) { me._moveNext(++me.i); return; } me._intervalFlag = setInterval(function() { if (currentCount >= count) { clearInterval(me._intervalFlag); if (me.i > me._path.length) return; me._moveNext(++me.i); } else { currentCount++; var x = effect(init_pos.x, target_pos.x, currentCount, count), y = effect(init_pos.y, target_pos.y, currentCount, count), pos = me._projection.pointToLngLat(new BMap.Pixel(x, y)); if (currentCount == 1) { var proPos = null; if (me.i - 1 >= 0) proPos = me._path[me.i - 1]; if (me._opts.enableRotation == true) { me.setRotation(proPos, initPos, targetPos); } if (me._opts.autoView && !me._map.getBounds().containsPoint(pos)) { me._map.setCenter(pos); } } me._marker.setPosition(pos); me._setInfoWin(pos); } }, timer); }; // 初始加载数据 this.loadData(); }, // 数据加载方法 async loadData() { try { // 清除旧覆盖物 this.mapInstance.clearOverlays(); const { data } = await this.$http({ url: this.$http.adornUrl('/mqtt/mtgpslocationinfo/queryGpsLocationInfos'), method: 'get', params: this.$http.adornParams({ 'startTime': this.startTime, 'endTime': this.endTime, 'thingid': this.$parent.$children[0].hwid }) }); if (data && data.code === 0 && data.data && data.data.length > 0) { const socitem = data.data; const arrPois = []; // 处理最后一个点作为中心点 const lastPoint = socitem[socitem.length - 1]; this.center = { lng: lastPoint.longitude, lat: lastPoint.latitude }; this.mapInstance.panTo(new this.BMap.Point(lastPoint.longitude, lastPoint.latitude)); // 创建图标 const myIcon = new this.BMap.Icon( require("../../../assets/img/markers.png"), new this.BMap.Size(23, 25), { offset: new this.BMap.Size(10, 25), imageOffset: new this.BMap.Size(0, -275) } ); // 处理所有点 socitem.forEach((item, i) => { const point = new this.BMap.Point(item.longitude, item.latitude); arrPois.push(point); // 计算距离 const distance = this.getDistance( lastPoint.latitude, lastPoint.longitude, item.latitude, item.longitude ); // 信息窗口内容 const content = ` <div class="bubble-content"> <h4 class="bubble-title">坐标信息</h4> <div class="bubble-body"> <p>电池编号:${item.thingId}</p> <p>经纬度:${item.longitudedirectionValue}${item.longitude},${item.latitudedirectionValue}${item.latitude}</p> <p>与最新点距离:${distance.toFixed(2)}m</p> <p>时间:${item.uploadTime}</p> </div> </div> `; // 创建标记 const marker = this.createMarker(point, content, i, myIcon); this.mapInstance.addOverlay(marker); // 添加圆点 const circle = new this.BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 8, strokeOpacity: 0.8, fillColor: '#f03' }); this.mapInstance.addOverlay(circle); }); // 添加折线 const polyLine = new this.BMap.Polyline(arrPois, { strokeWeight: 2, strokeOpacity: 0.5, strokeColor: "#303133", enableEditing: false, enableClicking: false, icons: [new this.BMap.IconSequence( new this.BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.3, strokeColor: '#fff', strokeWeight: 1 }), '100%', '5%', false )] }); this.mapInstance.addOverlay(polyLine); // 初始化路径动画 this.initLushu(arrPois); } else { console.log('没有数据显示'); // 添加无数据提示 const noDataLabel = new this.BMap.Label('暂无轨迹数据', { position: this.mapInstance.getCenter(), offset: new this.BMap.Size(-50, 0) }); noDataLabel.setStyle({ color: '#f56c6c', backgroundColor: 'rgba(255,255,255,0.7)', padding: '10px', borderRadius: '5px', border: '1px solid #f56c6c' }); this.mapInstance.addOverlay(noDataLabel); } } catch (error) { console.error('数据加载失败:', error); this.$message.error('轨迹数据加载失败: ' + error.message); } }, // 计算两点间距离 getDistance(lat1, lng1, lat2, lng2) { const EARTH_RADIUS = 6378.137; const rad = d => d * Math.PI / 180.0; const radLat1 = rad(lat1); const radLat2 = rad(lat2); const a = radLat1 - radLat2; const b = rad(lng1) - rad(lng2); const s = 2 * Math.asin(Math.sqrt( Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2) )); return s * EARTH_RADIUS * 1000; // 返回米 }, // 初始化路径动画 initLushu(arrPois) { if (!arrPois || arrPois.length < 2) return; this.lushu = new this.bMapLib.LuShu(this.mapInstance, arrPois, { defaultContent: this.batteryId, autoView: true, icon: new this.BMap.Icon( require("../../../assets/img/mybike2.png"), new this.BMap.Size(52, 26), { anchor: new this.BMap.Size(27, 13) } ), speed: this.speed, enableRotation: true }); }, // 控制动画播放 play(action) { if (!this.lushu) { this.$message.warning('请先查询轨迹数据'); return; } switch (action) { case 1: // 播放 this.lushu.start(); break; case 2: // 暂停 this.lushu.pause(); break; } }, // 创建标记点 createMarker(point, content, index, icon) { const marker = new this.BMap.Marker(point, { icon }); // 添加标签 const label = new this.BMap.Label(index + 1, { offset: new this.BMap.Size(-3, -5) }); label.setStyle({ color: '#fff', fontSize: '12px', width: '25px', height: '25px', lineHeight: '25px', textAlign: 'center', background: 'transparent', border: 'none' }); marker.setLabel(label); // 信息窗口配置 const infoWindow = new this.BMap.InfoWindow(content, { width: 300, height: 180 }); // 添加交互事件 marker.addEventListener("mouseover", () => { marker.openInfoWindow(infoWindow); }); marker.addEventListener("mouseout", () => { marker.closeInfoWindow(); }); return marker; } } }; </script> <style scoped> .drawing-panel { position: absolute; bottom: 45px; right: 500px; padding: 12px; border-radius: 5px; background-color: #fff; box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5); z-index: 999; display: flex; gap: 10px; flex-wrap: wrap; max-width: 100%; } .time-picker { width: 180px; } .btn { min-width: 60px; height: 36px; background-color: #fff; color: #1b8eec; border: 1px solid #1b8eec; border-radius: 4px; cursor: pointer; transition: all 0.3s; } .btn:hover { background-color: #1b8eec; color: #fff; } /* 信息窗口样式 */ .bubble-content { color: #333; font-size: 14px; } .bubble-title { background-color: #409EFF; color: white; padding: 8px; margin: 0; border-radius: 4px 4px 0 0; } .bubble-body { padding: 10px; background-color: rgba(240, 240, 240, 0.9); border-radius: 0 0 4px 4px; } .bubble-body p { margin: 5px 0; } </style> 帮我做调整,地图只画轨迹,不花myIcon
08-22
帮我删除轨迹上的每个坐标点的图标<template> <div> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" style="height:9.45rem;width: 100%;" @click="getClickInfo" :scroll-wheel-zoom='true'> <div class="drawing-panel" style="z-index: 99;"> <button class = "btn" @click='play(1)' size="small">播放</button> <button class = "btn" @click='play(2)' size="small">暂停</button> <button class = "btn" @click='play(3)' size="small">停止</button> <div> <div class="time-filter"> <el-date-picker v-model="startTime" type="datetime" placeholder="开始时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" /> <el-date-picker v-model="endTime" type="datetime" placeholder="结束时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" /> <el-button type="primary" @click="searchConfirm">查询</el-button> </div> </div> </div> </baidu-map> </div> </template> <script> export default { name: 'BtAddrBaiDu', data () { return { isMapReady: false, BMapObj: null, mapObj: null, startTime: null, endTime: null, center: {lng: 114.085947, lat: 22.547}, zoom: 15, point:"", gpsArr:[ { lng:114.000069, lat:22.500069 }, ], speed:500, lushu:{}, batteryId:"电池编号:"+this.$parent.$children[0].hwid, myMap: {} } }, mounted(){ }, methods: { searchConfirm() { this.loadMapData(); }, handler({BMap, map}) { this.BMapObj = BMap; this.mapObj = map; this.isMapReady = true; this.loadMapData(); }, loadMapData() { if (!this.isMapReady) return; this.$http({ url: this.$http.adornUrl('/mqtt/mtgpslocationinfo/queryGpsLocationInfos'), method: 'get', params: this.$http.adornParams({ 'thingid': this.$parent.$children[0].hwid, 'startTime': this.startTime, 'endTime': this.endTime }) }).then(({data}) => { const BMap = this.BMapObj; const map = this.mapObj; map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); map.centerAndZoom(); var arrPois = []; if (data && data.code === 0) { const socitem = data.data if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; this.center = {lng: clng, lat: clat}; var myIcon = new BMap.Icon( require("../../../assets/img/markers.png"), new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - 11 * 25) }); for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; var point = new BMap.Point(p0, p1); arrPois.push(point); var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td> 电池编号:"+socitem[i].thingId+"</td></tr>"; content = content + "<tr><td> 经纬度:"+socitem[i].longitudedirectionValue+socitem[i].longitude+","+socitem[i].latitudedirectionValue+socitem[i].latitude+"</td></tr>"; content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间:"+socitem[i].uploadTime+"</td></tr>"; content += "</table>"; var marker = this.createMarker( point, content, socitem[i].thingId, i, myIcon ); map.addOverlay(marker) var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 8, strokeOpacity: 2, Color: 'Blue', fillColor: '#f03' }) map.addOverlay(circle) } } else { console.log('没有数据的显示') this.soctitle = '暂无数据显示' } } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.3, strokeColor:'#fff', strokeWeight: 2 }); var icons = new BMap.IconSequence(sy, '100%', '5%',false); var polyLine = new BMap.Polyline(arrPois, { strokeWeight: 2, strokeOpacity: 0.5, strokeColor:"#303133", enableEditing: false, enableClicking: false, icons:[icons] }); map.addOverlay(polyLine); BMapLib.LuShu.prototype._move = function(initPos, targetPos, effect) { var pointsArr = [initPos, targetPos]; //点数组 var me = this, currentCount = 0, timer = 10, step = this._opts.speed / (1000 / timer), init_pos = this._projection.lngLatToPoint(initPos), target_pos = this._projection.lngLatToPoint(targetPos), count = Math.round(me._getDistance(init_pos, target_pos) / step); this._map.addOverlay( new BMap.Polyline(pointsArr, { strokeColor: "#111", strokeWeight: 3, strokeOpacity: 0.5 }) ); if (count < 1) { me._moveNext(++me.i); return; } me._intervalFlag = setInterval(function() { if (currentCount >= count) { clearInterval(me._intervalFlag); if (me.i > me._path.length) { return; } me._moveNext(++me.i); } else { currentCount++; var x = effect(init_pos.x, target_pos.x, currentCount, count), y = effect(init_pos.y, target_pos.y, currentCount, count), pos = me._projection.pointToLngLat(new BMap.Pixel(x, y)); if (currentCount == 1) { var proPos = null; if (me.i - 1 >= 0) { proPos = me._path[me.i - 1]; } if (me._opts.enableRotation == true) { me.setRotation(proPos, initPos, targetPos); } if (me._opts.autoView) { if (!me._map.getBounds().containsPoint(pos)) { me._map.setCenter(pos); } } } me._marker.setPosition(pos); me._setInfoWin(pos); } }, timer); }; map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT})); //负责切换地图类型的控件 this.initLushu(map, arrPois, this.batteryId); }) }, getDistance(lat1,lng1,lat2,lng2) { let EARTH_RADIUS = 6378.137; let radLat1 = this.rad(lat1); let radLat2 = this.rad(lat2); let a = radLat1 - radLat2; let b = this.rad(lng1) - this.rad(lng2); let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); s = s * EARTH_RADIUS; s = Math.round(s * 10000) / 10000; s = s*1000; //乘以1000是换算成米 return s; }, rad(d){ return d * Math.PI / 180.0; }, initLushu(map, arrPois, batteryId) { if (typeof BMapLib === 'undefined') { console.error('BMapLib not loaded'); return; } this.lushu = new BMapLib.LuShu(map, arrPois, { defaultContent: batteryId, // autoView: true, //是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整 icon: new BMap.Icon( require("../../../assets/img/mybike2.png"), new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), speed: this.speed, enableRotation: true, //是否设置marker随着道路的走向进行旋转 landmarkPois: [ { lng:114.52785300795644, lat:38.14758574827796, html: "加油站", pauseTime: 2 } ] }); }, play(val) { // 动图播放 if (this.arrIndex >= this.gpsArr.length - 3) { this.arrIndex = 0; } switch (val) { case 1: this.lushu.start(); break; case 2: this.lushu.pause(); break; case 3: this.lushu.stop(); this.arrIndex = 0; this.percentage = 0; break; } }, //创建maeker和infowindow //传入的参数为:坐标,弹框中要显示的信息,厂区号 createMarker(point, iw, paramNumber,i,myIcon) { var markerx = new BMap.Marker(point); //序号为1.2.3.4.....,根据需求更改 var label = new BMap.Label(i+1, { offset:new BMap.Size(-3,-5)}); label.setStyle({ background:'url()', color:'#fff', border:'none', fontSize:'12px', textAlign:'center', width:'25px', height:'25px', lineHeight:'25px' }); markerx.setLabel(label) //将序号放入标记markerx.setZIndex(9999) //在路线之上 覆盖路线 var opts = { width: 300, // 信息窗口宽度 height: 180, // 信息窗口高度 title: '<h4>坐标信息'+'</h4>', // 信息窗口标题 enableMessage: true, //设置允许信息窗发送短息 message: "" } //鼠标停留发生的事件 markerx.addEventListener("mouseover", function(e) { this.openInfoWindow(new BMap.InfoWindow(iw,opts)); }); //鼠标划出发生的事件 markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); //点击标记发生的事件,暂不做特殊处理 var that = this; markerx.addEventListener("click", function(e) { }); return markerx; } }} </script> <style > /* 弹出框中标题样式 */ .title { color: darkgreen; text-align: center; height: 0.125rem; } /* 弹出框中提示“无数据”的样式 */ .nodate { color: dimgrey; text-align: center; } /* 弹出框底部的点击提示样式 */ .reminder { font-size: 0.15rem; color: darkcyan; margin-left: 1.25rem; } .btn { width: 1.125rem; height: 0.375rem; float: left; background-color: #fff; color: rgba(27, 142, 236, 1); font-size: 0.175rem; border:0.0125rem solid rgba(27, 142, 236, 1); border-radius: 0.0625rem; margin: 0 0.0625rem; text-align: center; line-height: 0.375rem; } .btn:hover { background-color: rgba(27, 142, 236, 0.8); color: #fff; } .drawing-panel { z-index: 999; position: fixed; bottom: 1.3rem; margin-left: 0.3rem; padding: 0.12rem 0.12rem; border-radius: .05rem; background-color: #fff; box-shadow: 0 0.025rem 0.075rem 0 rgba(27, 142, 236, 0.5); } .BMap_bubble_title { color: white; font-size: 0.1625rem; font-weight: bold; text-align: left; padding-left: 0.0625rem; padding-top: 0.0625rem; border-bottom: 0.0125rem solid gray; background-color: #409EFF; } /* 消息内容 */ .BMap_bubble_content { background-color: rgba(40, 40, 40, 0.8); padding-left: 0.0625rem; padding-top: 0.0625rem; padding-bottom: 0.125rem; border-bottom-left-radius: 0.1rem; border-bottom-right-radius: 0.1rem; } /* 内容 */ .BMap_pop div:nth-child(9) { top: 0.4375rem !important; border-radius: 0.0625rem; } .BMap_pop div:nth-child(5) { display: none; } /* 左上角删除按键 */ .BMap_pop img { display: none; } .BMap_top { display: none; } .BMap_bottom { display: none; } .BMap_center { display: none; } /* 隐藏边角 */ .BMap_pop div:nth-child(1) div { display: none; } .BMap_pop div:nth-child(3) { display: none; } .BMap_pop div:nth-child(7) { display: none; } </style>
最新发布
08-23
<template> <div> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" style="height:9.45rem;width: 100%;" @click="getClickInfo" :scroll-wheel-zoom='true'> <div class="drawing-panel" style="z-index: 99;"> <button class = "btn" @click='play(1)' size="small">播放</button> <button class = "btn" @click='play(2)' size="small">暂停</button> <button class = "btn" @click='play(3)' size="small">停止</button> </div> </baidu-map> </div> </template> <script> export default { name: 'BtAddrBaiDu', data () { return { center: {lng: 114.085947, lat: 22.547}, zoom: 15, // 地图缩放比例,越大越细 point:"", gpsArr:[ { lng:114.000069, lat:22.500069 }, ],//后台拿到的gps点数组 speed:500,//速度 lushu:{},//路书 batteryId:"电池编号:"+this.$parent.$children[0].hwid, myMap: {} //地图 } }, mounted(){ this.handler() // 函数调用 }, methods: { handler({BMap, map}){ this.$nextTick(()=>{ this.$http({ url: this.$http.adornUrl('/mqtt/mtgpslocationinfo/queryGpsLocationInfos'), method: 'get', params: this.$http.adornParams({ 'limit': 50, 'thingid': this.$parent.$children[0].hwid //从父类的一个子类中获取hwid,子类中的hwid都是一样的 this.detailsparentmsg }) }).then(({data}) => { //无论有无数,都要画出地图 map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); map.centerAndZoom(); var arrPois = []; if (data && data.code === 0) { const socitem = data.data if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; this.center = {lng: clng, lat: clat}; var myIcon = new BMap.Icon( require("../../../assets/img/markers.png"), new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), // 指定定位位置 imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 }); for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; var point = new BMap.Point(p0, p1); arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td> 电池编号:"+socitem[i].thingId+"</td></tr>"; content = content + "<tr><td> 经纬度:"+socitem[i].longitudedirectionValue+socitem[i].longitude+","+socitem[i].latitudedirectionValue+socitem[i].latitude+"</td></tr>"; content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间:"+socitem[i].uploadTime+"</td></tr>"; content += "</table>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].thingId, i, myIcon ); map.addOverlay(marker) // 将标注添加到地图中 var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 8, strokeOpacity: 2, Color: 'Blue', fillColor: '#f03' }) map.addOverlay(circle) } } else { console.log('没有数据的显示') this.soctitle = '暂无数据显示' } } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } //绘制箭头及其样式 var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.3,//图标缩放大小 strokeColor:'#fff',//设置矢量图标的线填充颜色 strokeWeight: 1//设置线宽 }); var icons = new BMap.IconSequence(sy, '100%', '5%',false);//设置为true,可以对轨迹进行编辑 //画轨迹 var polyLine = new BMap.Polyline(arrPois, { strokeWeight: 2, //宽度 strokeOpacity: 0.5, //透明度,取值范围0 - 1 strokeColor:"#303133",//设置颜色 #4C7FED #303133 #18a45b enableEditing: false,//是否启用线编辑,默认为false enableClicking: false,//是否响应点击事件,默认为true icons:[icons] }); map.addOverlay(polyLine); //画轨迹结束 BMapLib.LuShu.prototype._move = function(initPos, targetPos, effect) { var pointsArr = [initPos, targetPos]; //点数组 var me = this, //当前的帧数 currentCount = 0, //步长,米/秒 timer = 10, step = this._opts.speed / (1000 / timer), //初始坐标 init_pos = this._projection.lngLatToPoint(initPos), //获取结束点的(x,y)坐标 target_pos = this._projection.lngLatToPoint(targetPos), //总的步长 count = Math.round(me._getDistance(init_pos, target_pos) / step); //显示折线 //如果想显示小车走过的痕迹,放开这段代码就行 this._map.addOverlay( new BMap.Polyline(pointsArr, { strokeColor: "#111", strokeWeight: 3, strokeOpacity: 0.5 }) ); // 画线 //如果小于1直接移动到下一点 if (count < 1) { me._moveNext(++me.i); return; } me._intervalFlag = setInterval(function() { //两点之间当前帧数大于总帧数的时候,则说明已经完成移动 if (currentCount >= count) { clearInterval(me._intervalFlag); //移动的点已经超过总的长度 if (me.i > me._path.length) { return; } //运行下一个点 me._moveNext(++me.i); } else { currentCount++; var x = effect(init_pos.x, target_pos.x, currentCount, count), y = effect(init_pos.y, target_pos.y, currentCount, count), pos = me._projection.pointToLngLat(new BMap.Pixel(x, y)); //设置marker if (currentCount == 1) { var proPos = null; if (me.i - 1 >= 0) { proPos = me._path[me.i - 1]; } if (me._opts.enableRotation == true) { me.setRotation(proPos, initPos, targetPos); } if (me._opts.autoView) { if (!me._map.getBounds().containsPoint(pos)) { me._map.setCenter(pos); } } } //正在移动 me._marker.setPosition(pos); //设置自定义overlay的位置 me._setInfoWin(pos); } }, timer); }; //添加缩略图控件 map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); //添加缩放平移控件 map.addControl(new BMap.NavigationControl()); //添加比例尺控件 map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); //添加地图类型控件 // map.addControl(new BMap.MapTypeControl()); // 普通街道视图:BMAP_NORMAL_MAP // 三维视图:BMAP_PERSPECTIVE_MAP // 卫星视图:BMAP_SATELLITE_MAP // 卫星和路网的混合视图:BMAP_HYBRID_MAP map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT})); //负责切换地图类型的控件 this.initLushu(map, arrPois, this.batteryId); }) }) }, // 测量百度地图两个点间的距离 /* * Lat1 Lung1 表示A点经纬度,Lat2 Lung2 表示B点经纬度; a=Lat1 – Lat2 为两点纬度之差 b=Lung1 * -Lung2 为两点经度之差; * 6378.137为地球半径,单位为公里; * 最新平均半径 大约3959英里(6371.393千米) 。这个数字是地心到地球表面所有各点距离的平均值。 可以这样求:平均半径=(赤道半径×2+极半径)/3 地球半径有时被使用作为距离单位, 特别是在天文学和地质学中常用。它通常用RE表示。 地球大概半径6370.856千米。 * 计算出来的结果单位为公里。 * 经过经纬度获取距离(单位:公里) * @param lat1 * @param lng1 * @param lat2 * @param lng2 * @return */ getDistance(lat1,lng1,lat2,lng2) { let EARTH_RADIUS = 6378.137; let radLat1 = this.rad(lat1); let radLat2 = this.rad(lat2); let a = radLat1 - radLat2; let b = this.rad(lng1) - this.rad(lng2); let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); s = s * EARTH_RADIUS; s = Math.round(s * 10000) / 10000; s = s*1000; //乘以1000是换算成米 return s; }, rad(d){ return d * Math.PI / 180.0; }, initLushu(map, arrPois, batteryId) { this.lushu = new BMapLib.LuShu(map, arrPois, { defaultContent: batteryId, // autoView: true, //是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整 icon: new BMap.Icon( require("../../../assets/img/mybike2.png"), new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), speed: this.speed, enableRotation: true, //是否设置marker随着道路的走向进行旋转 landmarkPois: [ { lng:114.52785300795644, lat:38.14758574827796, html: "加油站", pauseTime: 2 } ] }); }, play(val) { // 动图播放 if (this.arrIndex >= this.gpsArr.length - 3) { this.arrIndex = 0; } switch (val) { case 1: this.lushu.start(); break; case 2: this.lushu.pause(); break; case 3: this.lushu.stop(); this.arrIndex = 0; this.percentage = 0; break; } }, //创建maeker和infowindow //传入的参数为:坐标,弹框中要显示的信息,厂区号 createMarker(point, iw, paramNumber,i,myIcon) { var markerx = new BMap.Marker(point); //序号为1.2.3.4.....,根据需求更改 var label = new BMap.Label(i+1, { offset:new BMap.Size(-3,-5)}); label.setStyle({ background:'url()', color:'#fff', border:'none', fontSize:'12px', textAlign:'center', width:'25px', height:'25px', lineHeight:'25px' }); markerx.setLabel(label) //将序号放入标记markerx.setZIndex(9999) //在路线之上 覆盖路线 var opts = { width: 300, // 信息窗口宽度 height: 180, // 信息窗口高度 title: '<h4>坐标信息'+'</h4>', // 信息窗口标题 enableMessage: true, //设置允许信息窗发送短息 message: "" } //鼠标停留发生的事件 markerx.addEventListener("mouseover", function(e) { this.openInfoWindow(new BMap.InfoWindow(iw,opts)); }); //鼠标划出发生的事件 markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); //点击标记发生的事件,暂不做特殊处理 var that = this; markerx.addEventListener("click", function(e) { }); return markerx; } }} </script> <style > /* 弹出框中标题样式 */ .title { color: darkgreen; text-align: center; height: 0.125rem; } /* 弹出框中提示“无数据”的样式 */ .nodate { color: dimgrey; text-align: center; } /* 弹出框底部的点击提示样式 */ .reminder { font-size: 0.15rem; color: darkcyan; margin-left: 1.25rem; } .btn { width: 1.125rem; height: 0.375rem; float: left; background-color: #fff; color: rgba(27, 142, 236, 1); font-size: 0.175rem; border:0.0125rem solid rgba(27, 142, 236, 1); border-radius: 0.0625rem; margin: 0 0.0625rem; text-align: center; line-height: 0.375rem; } .btn:hover { background-color: rgba(27, 142, 236, 0.8); color: #fff; } .drawing-panel { z-index: 999; position: fixed; bottom: 1.3rem; margin-left: 0.3rem; padding: 0.12rem 0.12rem; border-radius: .05rem; background-color: #fff; box-shadow: 0 0.025rem 0.075rem 0 rgba(27, 142, 236, 0.5); } /* 以下为坐标 弹框信息的样式 */ /*地图标题*/ /* 去除百度地图版权那行字 和 百度logo */ .BMap_bubble_title { color: white; font-size: 0.1625rem; font-weight: bold; text-align: left; padding-left: 0.0625rem; padding-top: 0.0625rem; border-bottom: 0.0125rem solid gray; background-color: #409EFF; } /* 消息内容 */ .BMap_bubble_content { background-color: rgba(40, 40, 40, 0.8); padding-left: 0.0625rem; padding-top: 0.0625rem; padding-bottom: 0.125rem; border-bottom-left-radius: 0.1rem; border-bottom-right-radius: 0.1rem; } /* 内容 */ .BMap_pop div:nth-child(9) { top: 0.4375rem !important; border-radius: 0.0625rem; } .BMap_pop div:nth-child(5) { display: none; } /* 左上角删除按键 */ .BMap_pop img { display: none; } .BMap_top { display: none; } .BMap_bottom { display: none; } .BMap_center { display: none; } /* 隐藏边角 */ .BMap_pop div:nth-child(1) div { display: none; } .BMap_pop div:nth-child(3) { display: none; } .BMap_pop div:nth-child(7) { display: none; } </style>在顶部添加两个时间范围筛选作为入参,并且去掉点位图标,鼠标靠近就显示对应点位卡片信息
08-21
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值