Display a symbol on map.center point

Display a symbol on map.center point 
Tags: General Topics

Mar 8 2007 at 12:00 AM
Hiya,

Is there any way to put a symbol at the map center, to show that it is the user position?

I thought I could work like that:

Dim myUserLayer As SharpMap.Layers.VectorLayer = New SharpMap.Layers.VectorLayer("User")

myUserLayer.DataSource = New SharpMap.Data.Providers.GeometryProvider(New SharpMap.Geometries.Point(usersymboltestX, usersysmboltestY))
myUserLayer.Style.Fill = New System.Drawing.SolidBrush(Drawing.Color.Green)
myUserLayer.Style.Outline = New Pen(Color.Green)
myUserLayer.Style.EnableOutline = True
myUserLayer.Style.SymbolScale = 1
myUserLayer.Style.Symbol = New Drawing.Bitmap("programme//Merlin//System//Controls//icon//poi.jpg")

Maybe someone here has some ideas. Any hint will be welcome.

Cheers
Madison

PS: I'm developing for Pocket PC 2003 and I’m not working with the new SharpMap version but with an older compact framework version of SharpMap.

Mar 8 2007 at 12:55 AM
Hi!

I assume you wish to keep the center of the map selected even as you move the map? In this case using layers would not bee a good choice as the center of the map is constantly shifting.
Just draw your map using sharpmap and then draw your bitmap over the map yourself.
In case I'm missing something here SharpMap.Map.Center returns the current center of the map.

Goran

Mar 16 2007 at 9:37 PM
Hi Goran,

Thank you very much for pointing that out. I didn't even think of it. So, I just put a pictureBox in the center of the map, drew some ellipses and assigned them to the picturebox. Those ellipses not only mark the center of the map, but my gps position, too, which I assigned as the center point.

Cheers
Madison

May 15 2007 at 11:10 AM

Madison wrote:
Hi Goran,

Thank you very much for pointing that out. I didn't even think of it. So, I just put a pictureBox in the center of the map, drew some ellipses and assigned them to the picturebox. Those ellipses not only mark the center of the map, but my gps position, too, which I assigned as the center point.

Cheers
Madison


Hi Madison,
Any luck with pointing the image on the map ? could you post your code, i need to display the image on my map..

Thank you
Seth Bourne
 
不要模拟数据,参考原旧百度地图获取数据api调用和参数转换:<!--<template> <!-- :title="'地图定位信息'" --> <!-- :mapStyle="mapStyle" 地图自定义样式 --> <!-- <div style="height:400px;width:400px;color:red;"></div> --> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" @click="getClickInfo" :scroll-wheel-zoom='true'> <!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 --> <!-- <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE"> </bm-marker> --> </baidu-map> </template> --> <script> //import BMapLib from 'BMapLib' export default { name: 'BtAddrBaiDu', props: ['parentKey'], data () { return { curhwid: this.parentKey, center: {lng: 101.778916, lat: 36.623178}, zoom: 10, point:"", // 热力图的点数据,lng:点的经度 点的lat纬度 count:点的热力程度 points: [ ], map: '',// 保存地图实例 centerLng: '120.27378070983801', // 经度 E120.27378070983801-N30.22698883904069 兰溪 centerLat: '30.22698883904069', // 纬度 heatmapOverlay: {},// 热力图覆盖物 // 自定义样式 mapStyle:{ styleJson: [ { featureType: "water", elementType: "geometry", stylers: { color: "#409EFF", //#409EFF #20ab6a }, } ] } } }, methods: { handler ({BMap, map}) { // alert("this.$parent.hwid="+this.curhwid) this.$http({ // getBtsAreaEvery url: this.$http.adornUrl('/battery/udpreceiveinfo/getBtsAreaAll'), // url: this.$http.adornUrl('/battery/udpreceiveinfo/getBtsAreaEvery'), method: 'get', params: this.$http.adornParams({ 'key': this.curhwid //this.parentKey }) }).then(({data}) => { if (data && data.code === 0) { this.points = [] // 清空原始数据 const socitem = data.data console.log(socitem+"--socitem.len=="+socitem.length) if (socitem && socitem.length > 0) { for (let i = 0; i < socitem.length; i++) { // { lng :116.425867, lat :39.918989, count :8} console.log(socitem[i].lng+"=="+socitem[i].lat+":::"+socitem[i].count) this.points.push({ lng: socitem[i].lng, lat: socitem[i].lat, count: socitem[i].count }); } } else { this.points = [] } // alert(socitem.longitude+"=="+socitem.latitude) // var point = new BMap.Point(socitem.longitude, socitem.latitude) // 欣旺达 113.96734703991697 22.701466731778748 // var point = new BMap.Point(116.418261, 39.921984) // map.centerAndZoom(point, 5) // this.point = point; // 将map变量存储在全局 this.map = map; // 设定地图的中心点和坐标 let point = new BMap.Point(this.centerLng, this.centerLat); if(this.points!=null && this.points.length>0){ point = new BMap.Point(this.points[0].lng, this.points[0].lat); } // 设置中心点坐标和地图级别 this.map.centerAndZoom(point, 5); // 允许滚轮缩放 this.map.enableScrollWheelZoom(point, 5); // 添加左上角缩放比例尺(offset: new BMap.Size(0, 0)为比例尺的坐标位置) var opts = {offset: new BMap.Size(10, 10)} this.map.addControl(new BMap.NavigationControl(opts)); // 设置地图默认缩放比例 this.map.setZoom(7); // alert("points=="+this.points.length) this.heatmapOverlay = //new BMapLib.HeatmapOverlay({"radius":20}) new BMapLib.HeatmapOverlay({ // 热力图的每个点的半径大小 'radius': BMAP_POINT_SIZE_SMALL * 2.12, // 热力的透明度0~1 'opacity': 0.7, // "visible":true, // 是否显示热力图 // 其中 key 表示插值的位置0~1,value 为颜色值 'gradient': { // .2:'rgb(0, 255, 255)', // .5:'rgb(0, 110, 255)', // .8:'rgb(100, 0, 255)' // 0:'rgb(102, 255, 0)', // .5:'rgb(255, 170, 0)', // 1:'rgb(255, 0, 0)' // .2:'rgb(102, 255, 0)', // .5:'rgb(255, 170, 0)', // .8:'rgb(255, 0, 0)' .2:'#e803eb', .4:'#207cca', .6:'#31ff00', .8:'#f8ff00', .95:'#ff0500' } }) // alert("heatmapOverlay=="+BMAP_POINT_SIZE_SMALL*4) // 清除图层(每次重新调用需要清除上一个覆盖物图层) // this.map.clearOverlays(); // 添加热力覆盖物 this.map.addOverlay(this.heatmapOverlay); this.heatmapOverlay.setDataSet({data: this.points, max: 50}); // 显示热力图,隐藏为this.heatmapOverlay.hide(); this.heatmapOverlay.show(); // this.heatmapOverlay = new BMap.HeatmapOverlay({ // // 热力图的每个点的半径大小 // 'radius': BMAP_POINT_SIZE_SMALL * 4, // // 热力的透明度0~1 // 'opacity': 0.8, // // 其中 key 表示插值的位置0~1,value 为颜色值 // 'gradient': { // 0:'rgb(102, 255, 0)', // .5:'rgb(255, 170, 0)', // 1:'rgb(255, 0, 0)' // } // }) // // 清除图层(每次重新调用需要清除上一个覆盖物图层) // // map.clearOverlays(); // // 添加热力覆盖物 // // map.addOverlay(this.heatmapOverlay); // this.heatmapOverlay.setDataSet({data: this.points, max: 100}); // // 显示热力图,隐藏为this.heatmapOverlay.hide(); // this.heatmapOverlay.show(); // // 添加热力覆盖物 // map.addOverlay(this.heatmapOverlay); // var marker = new BMap.Marker(point) // 创建标注 //如果要显示其他数据,加到infoMessage中 // var infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; // //调用创建marker标记的方法, // var marker = this.createMarker( // point, // infoMessage, // 2 // ); // map.addOverlay(marker) // 将标注添加到地图中 // var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 8, strokeOpacity: 2, Color: 'Red', fillColor: '#f03' }) // map.addOverlay(circle) // this.heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: 40,opacity:0.4}); // map.addOverlay(this.heatmapOverlay); // this.heatmapOverlay.setDataSet({ data: this.points, max: 100 }); } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } //添加缩略图控件 map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); //添加缩放平移控件 map.addControl(new BMap.NavigationControl()); //添加比例尺控件 map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); }) }, init (id) { this.curhwid = id // this.visible = true // 假设this.map是百度地图的实例 // this.map.clearOverlays(); this.$http({ url: this.$http.adornUrl('/battery/udpreceiveinfo/getBtsAreaAll'), // url: this.$http.adornUrl('/battery/udpreceiveinfo/getBtsAreaEvery'), method: 'get', params: this.$http.adornParams({ 'key': this.curhwid //this.parentKey }) }).then(({data}) => { if (data && data.code === 0) { this.points = [] // 清空原始数据 const socitem = data.data console.log(socitem+"--socitem.len=="+socitem.length) if (socitem && socitem.length > 0) { for (let i = 0; i < socitem.length; i++) { // { lng :116.425867, lat :39.918989, count :8} // alert(socitem[i].lng+"=="+socitem[i].lat+":::"+socitem[i].count) console.log(socitem[i].lng+"--init=="+socitem[i].lat+":::"+socitem[i].count) this.points.push({ lng: socitem[i].lng, lat: socitem[i].lat, count: socitem[i].count }); } } else { this.points = [] } // this.map = new BMap.Map('allmap'); //map; // 设定地图的中心点和坐标 let point = new BMap.Point(this.centerLng, this.centerLat); if(this.points!=null && this.points.length>0){ point = new BMap.Point(this.points[0].lng, this.points[0].lat); } // 设置中心点坐标和地图级别 this.map.centerAndZoom(point, 5); // 允许滚轮缩放 this.map.enableScrollWheelZoom(point, 5); // 添加左上角缩放比例尺(offset: new BMap.Size(0, 0)为比例尺的坐标位置) var opts = {offset: new BMap.Size(10, 10)} this.map.addControl(new BMap.NavigationControl(opts)); // 设置地图默认缩放比例 this.map.setZoom(7); this.heatmapOverlay = //new BMapLib.HeatmapOverlay({"radius":20}) new BMapLib.HeatmapOverlay({ // 热力图的每个点的半径大小 'radius': BMAP_POINT_SIZE_SMALL * 2.12, // 热力的透明度0~1 'opacity': 0.7, // "visible":true, // 是否显示热力图 // 其中 key 表示插值的位置0~1,value 为颜色值 'gradient': { .2:'#e803eb', .4:'#207cca', .6:'#31ff00', .8:'#f8ff00', .95:'#ff0500' } }) // 清除图层(每次重新调用需要清除上一个覆盖物图层) this.map.clearOverlays(); // 添加热力覆盖物 this.map.addOverlay(this.heatmapOverlay); this.heatmapOverlay.setDataSet({data: this.points, max: 50}); // 显示热力图,隐藏为this.heatmapOverlay.hide(); this.heatmapOverlay.show(); } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } //添加缩略图控件 this.map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); //添加缩放平移控件 this.map.addControl(new BMap.NavigationControl()); //添加比例尺控件 this.map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); }); this.handler() }, getClickInfo (e) { console.log(e.point.lng) console.log(e.point.lat) this.center.lng = e.point.lng this.center.lat = e.point.lat }, //创建maeker和infowindow //传入的参数为:坐标,弹框中要显示的信息,厂区号 createMarker(point, iw, paramNumber) { // var myIcon = new BMap.Icon( // "http://developer.baidu.com/map/jsdemo/img/car.png", // new BMap.Size(52, 26), // { // anchor: new BMap.Size(27, 13) // } // ); // var markerx = new BMap.Marker(point,{icon:myIcon}); // 车标图 var markerx = new BMap.Marker(point); //鼠标停留发生的事件 markerx.addEventListener("mouseover", function(e) { this.openInfoWindow(new BMap.InfoWindow(iw)); }); //鼠标划出发生的事件 markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); //点击标记发生的事件 var that = this; markerx.addEventListener("click", function(e) { // that.$router.push({ // path: "home", // query: { // paramnumber: paramNumber // }//给跳转页面传递的参数 // }); }); return markerx; } }} </script>--> <style > /* 去除百度地图版权那行字 和 百度logo */ .BMap_cpyCtrl { display:none!important; } /* .anchorBL { display: none!important; } */ /* 弹出框中标题样式 */ .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; } #mapIndex .el-dialog .el-dialog__header{ padding:0rem } #mapIndex .el-dialog .el-dialog__body{ padding:0.025rem } </style>;<template> <div id=""> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" @click="getClickInfo" :scroll-wheel-zoom='true' :style="mapStyle"> </baidu-map> </div> </template> <script> export default { name: 'BtAddrBaiDu', data () { return { dataList: [], projectId: 38, // 项目 thingId: "", center: {lng: 114.085947, lat: 22.547}, zoom: 14, // 地图缩放比例,越大越细 point:"", gpsArr:[ { lng:114.000069, lat:22.500069 }, ],//后台拿到的gps点数组 map: '',// 保存地图实例 speed:500,//速度 lushu:{},//路书 batteryId:"电池编号:"+this.$parent.$children[0].hwid, myMap: {}, //地图 headerH: 40, // 顶部导航/页头高度 extraGap: 0, // 额外上下间距 foldBarH: 0 // 如果有折叠条在地图上面就加进去;在下面则不用 } }, computed:{ documentClientHeight: { get () { return this.$store.state.common.documentClientHeight } }, // 动态计算地图高度 mapStyle () { const offset = this.headerH + this.foldBarH + this.extraGap const h = Math.max(600, this.documentClientHeight - offset) // 给个最小值防止过矮 return { height: h + 'px', width: '100%' } } }, watch: { documentClientHeight () { this.$nextTick(this.resizeMap) }, // 如果你有折叠区在地图上方,展开/收起后也重算一次 isExpanded () { this.$nextTick(() => setTimeout(this.resizeMap, 200)) }, isExpandedAll () { this.$nextTick(() => setTimeout(this.resizeMap, 200)) } }, mounted(){ this.handler() // 函数调用activated this.$nextTick(this.resizeMap) window.addEventListener('resize', this.resizeMap) }, activated () { this.handler() }, methods: { init (id,dataList) { this.projectId = id this.dataList = dataList // this.map是百度地图的实例 this.map.clearOverlays(); this.$nextTick(()=>{ //无论有无数,都要画出地图 this.map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); this.map.centerAndZoom(); var arrPois = []; if (this.dataList) { const socitem = this.dataList if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; // this.center = {lng: socitem[socitem.length-1].longitude, lat: socitem[socitem.length-1].latitude}; // 以最新经纬度为中心 if(clng === 'null' || clng === '' || clng === undefined || clng === null || clat === 'null' || clat==='' || clat === undefined || clat === null){ for (let i = 0; i < socitem.length; i++) { if(socitem[i].longitude != '' && socitem[i].longitude != undefined && socitem[i].longitude != null && socitem[i].latitude !='' && socitem[i].latitude != undefined && socitem[i].latitude != null){ clng = socitem[i].longitude; clat = socitem[i].latitude; } } } this.center = {lng: clng, lat: clat}; //http://map.baidu.com/image/us_mk_icon.png //说明:要使用不同的图片,只需要修改图片偏移就可以了,第一行第一列图片是(0, 0 - 0 * 25),第二行第一列图片是(0, 0 - 1 * 25)......以此类推就可以了 // var myIcon = new BMap.Icon( // require("../../assets/img/markers.png"), // // "http://api.map.baidu.com/img/markers.png", // new BMap.Size(23, 25), { // offset: new BMap.Size(10, 25), // 指定定位位置 // imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 // }); var myIcon = new BMap.Icon( require("../../assets/img/mbike1.png"), // "http://developer.baidu.com/map/jsdemo/img/car.png", // http://webapi.amap.com/images/car.png ~@/assets/img/car.png http://developer.baidu.com/map/jsdemo/img/fox.gif http://developer.baidu.com/map/jsdemo/img/car.png new BMap.Size(50, 35), { anchor: new BMap.Size(12, 28) } ); for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; // var checksum = makerArry[i].checksum; var point = new BMap.Point(p0, p1); //118.230272,33.482474 arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td style='line-height: 1.5;font-size: 15px;font-weight: bold; color: rgba(126, 203, 252, 1);'> 电量:"+socitem[i].soc+" %</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> 电池编号:"+socitem[i].hwid+"</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> sn码:"+socitem[i].sn+"</td></tr>"; content = content + "<tr><td> 经纬度:"+socitem[i].longitudeDirection+socitem[i].longitude+","+socitem[i].latitudeDirection+socitem[i].latitude+"</td></tr>"; // content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间:"+socitem[i].myUploadTime+"</td></tr>"; content += "</table>"; // var infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].hwid, i, myIcon, socitem[i].soc ); this.map.addOverlay(marker) // 将标注添加到地图中 var circle = new BMap.Circle(point, 6, { strokeColor: 'Blue', strokeWeight: 8, strokeOpacity: 2, Color: 'Blue', fillColor: '#f03' }) this.map.addOverlay(circle) } } else { console.log('没有数据的显示') this.soctitle = '暂无数据显示' } } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } //添加缩略图控件 this.map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); //添加缩放平移控件 this.map.addControl(new BMap.NavigationControl()); //添加比例尺控件 this.map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); // 设置地图视角:倾斜角和旋转角。无效 // this.map.setView({ // rotation: 45, // 设置旋转角度,单位为度(0-360) // tilt: 60 // 设置倾斜角度,单位为度(0-60) // }); //添加地图类型控件 // map.addControl(new BMap.MapTypeControl()); // 普通街道视图:BMAP_NORMAL_MAP // 三维视图:BMAP_PERSPECTIVE_MAP // 卫星视图:BMAP_SATELLITE_MAP // 卫星和路网的混合视图:BMAP_HYBRID_MAP this.map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT})); //负责切换地图类型的控件 // this.initLushu(this.map, arrPois, this.batteryId); // this.map.addEventListener('tilesloaded', function () { // alert('地图加载完成!'); // }); }) this.handler() }, handler({BMap, map}){ this.$nextTick(()=>{ this.map = map; //无论有无数,都要画出地图 map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); map.centerAndZoom(); var arrPois = []; if (this.dataList) { const socitem = this.dataList if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; if(clng === 'null' || clng === '' || clng === undefined || clng === null || clat === 'null' || clat==='' || clat === undefined || clat === null){ for (let i = 0; i < socitem.length; i++) { if(socitem[i].longitude != '' && socitem[i].longitude != undefined && socitem[i].longitude != null && socitem[i].latitude !='' && socitem[i].latitude != undefined && socitem[i].latitude != null){ clng = socitem[i].longitude; clat = socitem[i].latitude; } } } // this.center = {lng: socitem[socitem.length-1].longitude, lat: socitem[socitem.length-1].latitude}; // 以最新经纬度为中心 this.center = {lng: clng, lat: clat}; //http://map.baidu.com/image/us_mk_icon.png //说明:要使用不同的图片,只需要修改图片偏移就可以了,第一行第一列图片是(0, 0 - 0 * 25),第二行第一列图片是(0, 0 - 1 * 25)......以此类推就可以了 // var myIcon = new BMap.Icon( // require("../../assets/img/markers.png"), // // "http://api.map.baidu.com/img/markers.png", // new BMap.Size(23, 25), { // offset: new BMap.Size(10, 25), // 指定定位位置 // imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 // }); // var myIcon = new BMap.Icon( // 自定义图标 // require("../../assets/img/car.png"), // new BMap.Size(52, 26) // 图标的宽度和高度 // ); // myIcon.setImageSize(new BMap.Size(52,26)); var myIcon = new BMap.Icon( require("../../assets/img/mbike1.png"), // "http://developer.baidu.com/map/jsdemo/img/car.png", // http://webapi.amap.com/images/car.png ~@/assets/img/car.png http://developer.baidu.com/map/jsdemo/img/fox.gif http://developer.baidu.com/map/jsdemo/img/car.png new BMap.Size(50, 35), { anchor: new BMap.Size(12, 28) } ); //打点图标样式------------------------------------------------------ for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; // var checksum = makerArry[i].checksum; var point = new BMap.Point(p0, p1); //118.230272,33.482474 arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td style='line-height: 1.5;font-size: 15px;font-weight: bold; color: rgba(126, 203, 252, 1);'> 电量:"+socitem[i].soc+" %</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> 电池编号:"+socitem[i].hwid+"</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> sn码:"+socitem[i].sn+"</td></tr>"; content = content + "<tr><td> 经纬度:"+socitem[i].longitudeDirection+socitem[i].longitude+","+socitem[i].latitudeDirection+socitem[i].latitude+"</td></tr>"; // content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间:"+socitem[i].myUploadTime+"</td></tr>"; content += "</table>"; // var infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].hwid, i, myIcon, socitem[i].soc ); map.addOverlay(marker) // 将标注添加到地图中 var circle = new BMap.Circle(point, 6, { strokeColor: 'Blue', 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.6,//图标缩放大小 // strokeColor:'#fff',//设置矢量图标的线填充颜色 // strokeWeight: 1//设置线宽 // }); // var icons = new BMap.IconSequence(sy, '100%', '5%',false);//设置为true,可以对轨迹进行编辑 // //画轨迹 // var polyLine = new BMap.Polyline(arrPois, { // // strokeColor: "blue", //设置颜色 // 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) { // // alert(count < 1); // me._moveNext(++me.i); // return; // } // // alert(count); // 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); // }; // BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。 // BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。 // BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。 // BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。 //添加地图类型控件 // map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));//右上角,默认地图控件 //地图混合 // map.addControl(new BMap.MapTypeControl({ // mapTypes:[ // BMAP_NORMAL_MAP, // BMAP_HYBRID_MAP // ]})); //添加缩略图控件 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.setView({ // rotation: 45, // 设置旋转角度,单位为度(0-360) // tilt: 60 // 设置倾斜角度,单位为度(0-60) // }); //添加地图类型控件 // 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); // map.addEventListener('tilesloaded', function () { // alert('地图加载完成!'); // }); }) }, // 测量百度地图两个点间的距离 // getDistance (itemPoint) { // var map = new BMap.Map('') // var pointB = new BMap.Point(parseFloat(itemPoint.log), parseFloat(itemPoint.lat)) // 店铺的经纬度 // var distance = (map.getDistance(this.pointA, pointB) / 1000).toFixed(2) // 保留小数点后两位 // return distance // }, /* * Lat1 Lung1 表示A点经纬度,Lat2 Lung2 表示B点经纬度; a=Lat1 – Lat2 为两点纬度之差 b=Lung1 * -Lung2 为两点经度之差; * 6378.137为地球半径,单位为公里; * 最新平均半径 大约3959英里(6371.393千米) 。这个数字是地心到地球表面所有各点距离的平均值。 可以这样求:平均半径=(赤道半径&times;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 * 10000d) / 10000d; 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"), //"http://developer.baidu.com/map/jsdemo/img/car.png", // http://webapi.amap.com/images/car.png ~@/assets/img/car.png http://developer.baidu.com/map/jsdemo/img/fox.gif http://developer.baidu.com/map/jsdemo/img/car.png new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), // icon: new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157)), 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,soc) { var markerx = new BMap.Marker(point,{icon:myIcon}); // var markerx = new BMap.Marker(point); //序号为1.2.3.4.....,根据需求更改 // var label = new BMap.Label(i+1, { // offset:new BMap.Size(-3,-5)}); var label = new BMap.Label(paramNumber+" "+soc+"%", { offset:new BMap.Size(-3,-20)}); // label.setStyle({ // // background:'url()', // ~@/assets/img/guiji2.png // // color:'#fff', // // border:'none', // // fontSize:'10px', // // textAlign:'center', // // width:'75px', // // height:'25px', // // lineHeight:'25px', // color: 'red', // 文本颜色 // fontSize: '12px', // 字体大小 // fontFamily: '微软雅黑', // 字体类型 // border: '1px solid blue', // 边框样式 // borderRadius: '4px', // 边框圆角 // padding: '2px', // 内边距 // backgroundColor: 'white' // 背景颜色 // }); //文本标注样式,transform为X轴平移,即文本居中显示 label.setStyle({ color: "#fff", backgroundColor: "rgba(126, 203, 252, 1)",//"rgba(0, 0, 0, 0.5)", border: '1px solid blue', // 边框样式 borderRadius: '4px', // 边框圆角 padding: "0 10px", fontSize: "14px", lineHeight: "20px", border :"0", fontFamily: '微软雅黑', // 字体类型 transform:'translateX(-40%)' }); 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)); // alert("mouseover==="+iw); }); //鼠标划出发生的事件 markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); //点击标记发生的事件,暂不做特殊处理 var that = this; markerx.addEventListener("click", function(e) { // alert("3333333333333333############"+paramNumber) // 以上子类调用父组件方法,适合弹框的页面(自己遇到的,还未查出原因) that.$emit('fatherMethod',paramNumber); // that.getParentMsg(paramNumber) // this.openInfoWindow(new BMap.InfoWindow(iw,opts)); // that.$router.push({ // path: "home", // query: { // paramnumber: paramNumber // }//给跳转页面传递的参数 // }); }); return markerx; }, getParentMsg(paramNumber) { // alert('电池编码:'+paramNumber); let parent = this.$parent; //1.获取父组件对象 console.log('电池编码:'+paramNumber); //2.调用父组件的属性 // alert(parent.timeType); parent.openDetailsDialogHome(paramNumber); //3.调用父组件的方法 // 以上子类调用父组件方法,适合弹框的页面(自己遇到的,还未查出原因) // this.$emit('fatherMethod',0,'','','',markType,alarmType); this.$emit('fatherMethod',paramNumber); }, handler2({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: socitem[socitem.length-1].longitude, lat: socitem[socitem.length-1].latitude}; // 以最新经纬度为中心 this.center = {lng: clng, lat: clat}; //下方为打点代码------------------------------------------------- // var nowIcon = new BMap.Icon( // require("../../../assets/img/guiji2.png"), // new BMap.Size(47, 47), // { // anchor: new BMap.Size(22, 40), // imageOffset: new BMap.Size(0, 0) // } // ); // var myIcon = new BMap.Icon( // "http://developer.baidu.com/map/jsdemo/img/car.png", // new BMap.Size(52, 26), // { // anchor: new BMap.Size(27, 13) // } // ); //http://map.baidu.com/image/us_mk_icon.png //说明:要使用不同的图片,只需要修改图片偏移就可以了,第一行第一列图片是(0, 0 - 0 * 25),第二行第一列图片是(0, 0 - 1 * 25)......以此类推就可以了 var myIcon = new BMap.Icon( require("../../assets/img/mbike1.png"), //"http://api.map.baidu.com/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 checksum = makerArry[i].checksum; var point = new BMap.Point(p0, p1); //118.230272,33.482474 arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; // content = content + "<tr><td> 电池编号:"+socitem[i].hwid+"</td></tr>"; // content = content + "<tr><td> 所属:"+socitem[i].describe+"</td></tr>"; // content = content + "<tr><td> 经纬度:"+socitem[i].longitudeMark+socitem[i].longitude+","+socitem[i].latitudeMark+socitem[i].latitude+"</td></tr>"; // content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; // content = content + "<tr><td> 时间:"+socitem[i].modifyTime+"</td></tr>"; // content += "</table>"; 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 infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].thingId, i, myIcon, socitem[i].soc ); 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, { // strokeColor: "blue", //设置颜色 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) { // alert(count < 1); me._moveNext(++me.i); return; } // alert(count); 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); }; // BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。 // BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。 // BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。 // BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。 //添加地图类型控件 // map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));//右上角,默认地图控件 //地图混合 // map.addControl(new BMap.MapTypeControl({ // mapTypes:[ // BMAP_NORMAL_MAP, // BMAP_HYBRID_MAP // ]})); //添加缩略图控件 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); // map.addEventListener('tilesloaded', function () { // alert('地图加载完成!'); // }); }) }) }, onReady () { this.$nextTick(this.resizeMap) }, resizeMap () { const bm = this.$refs.bm if (bm && bm.map && typeof bm.map.checkResize === 'function') bm.map.checkResize() } } } </script> <style > /* 去除百度地图版权那行字 和 百度logo */ /* .BMap_cpyCtrl { display: none!important; } */ /* .anchorBL { display: none!important; } */ /* 弹出框中标题样式 */ .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 */ /* .anchorBL, .BMap_cpyCtrl { display: none; } */ .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 { /* // top: 43px !important; // left: 215px !important; */ 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>,然后给我完整的高德地图组件vue
12-18
<template> <div id=""> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" @click="getClickInfo" :scroll-wheel-zoom='true' :style="mapStyle"> </baidu-map> </div> </template> <script> export default { name: 'BtAddrBaiDu', data () { return { dataList: [], projectId: 38, // 项目 thingId: "", center: {lng: 114.085947, lat: 22.547}, zoom: 14, // 地图缩放比例,越大越细 point:"", gpsArr:[ { lng:114.000069, lat:22.500069 }, ],//后台拿到的gps点数组 map: '',// 保存地图实例 speed:500,//速度 lushu:{},//路书 batteryId:"电池编号:"+this.$parent.$children[0].hwid, myMap: {}, //地图 headerH: 40, // 顶部导航/页头高度 extraGap: 0, // 额外上下间距 foldBarH: 0 // 如果有折叠条在地图上面就加进去;在下面则不用 } }, computed:{ documentClientHeight: { get () { return this.$store.state.common.documentClientHeight } }, // 动态计算地图高度 mapStyle () { const offset = this.headerH + this.foldBarH + this.extraGap const h = Math.max(600, this.documentClientHeight - offset) // 给个最小值防止过矮 return { height: h + 'px', width: '100%' } } }, watch: { documentClientHeight () { this.$nextTick(this.resizeMap) }, // 如果你有折叠区在地图上方,展开/收起后也重算一次 isExpanded () { this.$nextTick(() => setTimeout(this.resizeMap, 200)) }, isExpandedAll () { this.$nextTick(() => setTimeout(this.resizeMap, 200)) } }, mounted(){ this.handler() // 函数调用activated this.$nextTick(this.resizeMap) window.addEventListener('resize', this.resizeMap) }, activated () { this.handler() }, methods: { init (id,dataList) { this.projectId = id this.dataList = dataList // this.map是百度地图的实例 this.map.clearOverlays(); this.$nextTick(()=>{ //无论有无数,都要画出地图 this.map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); this.map.centerAndZoom(); var arrPois = []; if (this.dataList) { const socitem = this.dataList if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; // this.center = {lng: socitem[socitem.length-1].longitude, lat: socitem[socitem.length-1].latitude}; // 以最新经纬度为中心 if(clng === 'null' || clng === '' || clng === undefined || clng === null || clat === 'null' || clat==='' || clat === undefined || clat === null){ for (let i = 0; i < socitem.length; i++) { if(socitem[i].longitude != '' && socitem[i].longitude != undefined && socitem[i].longitude != null && socitem[i].latitude !='' && socitem[i].latitude != undefined && socitem[i].latitude != null){ clng = socitem[i].longitude; clat = socitem[i].latitude; } } } this.center = {lng: clng, lat: clat}; //http://map.baidu.com/image/us_mk_icon.png //说明:要使用不同的图片,只需要修改图片偏移就可以了,第一行第一列图片是(0, 0 - 0 * 25),第二行第一列图片是(0, 0 - 1 * 25)......以此类推就可以了 // var myIcon = new BMap.Icon( // require("../../assets/img/markers.png"), // // "http://api.map.baidu.com/img/markers.png", // new BMap.Size(23, 25), { // offset: new BMap.Size(10, 25), // 指定定位位置 // imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 // }); var myIcon = new BMap.Icon( require("../../assets/img/mbike1.png"), // "http://developer.baidu.com/map/jsdemo/img/car.png", // http://webapi.amap.com/images/car.png ~@/assets/img/car.png http://developer.baidu.com/map/jsdemo/img/fox.gif http://developer.baidu.com/map/jsdemo/img/car.png new BMap.Size(50, 35), { anchor: new BMap.Size(12, 28) } ); for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; // var checksum = makerArry[i].checksum; var point = new BMap.Point(p0, p1); //118.230272,33.482474 arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td style='line-height: 1.5;font-size: 15px;font-weight: bold; color: rgba(126, 203, 252, 1);'> 电量:"+socitem[i].soc+" %</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> 电池编号:"+socitem[i].hwid+"</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> sn码:"+socitem[i].sn+"</td></tr>"; content = content + "<tr><td> 经纬度:"+socitem[i].longitudeDirection+socitem[i].longitude+","+socitem[i].latitudeDirection+socitem[i].latitude+"</td></tr>"; // content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间:"+socitem[i].myUploadTime+"</td></tr>"; content += "</table>"; // var infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].hwid, i, myIcon, socitem[i].soc ); this.map.addOverlay(marker) // 将标注添加到地图中 var circle = new BMap.Circle(point, 6, { strokeColor: 'Blue', strokeWeight: 8, strokeOpacity: 2, Color: 'Blue', fillColor: '#f03' }) this.map.addOverlay(circle) } } else { console.log('没有数据的显示') this.soctitle = '暂无数据显示' } } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } //添加缩略图控件 this.map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); //添加缩放平移控件 this.map.addControl(new BMap.NavigationControl()); //添加比例尺控件 this.map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); // 设置地图视角:倾斜角和旋转角。无效 // this.map.setView({ // rotation: 45, // 设置旋转角度,单位为度(0-360) // tilt: 60 // 设置倾斜角度,单位为度(0-60) // }); //添加地图类型控件 // map.addControl(new BMap.MapTypeControl()); // 普通街道视图:BMAP_NORMAL_MAP // 三维视图:BMAP_PERSPECTIVE_MAP // 卫星视图:BMAP_SATELLITE_MAP // 卫星和路网的混合视图:BMAP_HYBRID_MAP this.map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT})); //负责切换地图类型的控件 // this.initLushu(this.map, arrPois, this.batteryId); // this.map.addEventListener('tilesloaded', function () { // alert('地图加载完成!'); // }); }) this.handler() }, handler({BMap, map}){ this.$nextTick(()=>{ this.map = map; //无论有无数,都要画出地图 map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); map.centerAndZoom(); var arrPois = []; if (this.dataList) { const socitem = this.dataList if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; if(clng === 'null' || clng === '' || clng === undefined || clng === null || clat === 'null' || clat==='' || clat === undefined || clat === null){ for (let i = 0; i < socitem.length; i++) { if(socitem[i].longitude != '' && socitem[i].longitude != undefined && socitem[i].longitude != null && socitem[i].latitude !='' && socitem[i].latitude != undefined && socitem[i].latitude != null){ clng = socitem[i].longitude; clat = socitem[i].latitude; } } } // this.center = {lng: socitem[socitem.length-1].longitude, lat: socitem[socitem.length-1].latitude}; // 以最新经纬度为中心 this.center = {lng: clng, lat: clat}; //http://map.baidu.com/image/us_mk_icon.png //说明:要使用不同的图片,只需要修改图片偏移就可以了,第一行第一列图片是(0, 0 - 0 * 25),第二行第一列图片是(0, 0 - 1 * 25)......以此类推就可以了 // var myIcon = new BMap.Icon( // require("../../assets/img/markers.png"), // // "http://api.map.baidu.com/img/markers.png", // new BMap.Size(23, 25), { // offset: new BMap.Size(10, 25), // 指定定位位置 // imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 // }); // var myIcon = new BMap.Icon( // 自定义图标 // require("../../assets/img/car.png"), // new BMap.Size(52, 26) // 图标的宽度和高度 // ); // myIcon.setImageSize(new BMap.Size(52,26)); var myIcon = new BMap.Icon( require("../../assets/img/mbike1.png"), // "http://developer.baidu.com/map/jsdemo/img/car.png", // http://webapi.amap.com/images/car.png ~@/assets/img/car.png http://developer.baidu.com/map/jsdemo/img/fox.gif http://developer.baidu.com/map/jsdemo/img/car.png new BMap.Size(50, 35), { anchor: new BMap.Size(12, 28) } ); //打点图标样式------------------------------------------------------ for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; // var checksum = makerArry[i].checksum; var point = new BMap.Point(p0, p1); //118.230272,33.482474 arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td style='line-height: 1.5;font-size: 15px;font-weight: bold; color: rgba(126, 203, 252, 1);'> 电量:"+socitem[i].soc+" %</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> 电池编号:"+socitem[i].hwid+"</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> sn码:"+socitem[i].sn+"</td></tr>"; content = content + "<tr><td> 经纬度:"+socitem[i].longitudeDirection+socitem[i].longitude+","+socitem[i].latitudeDirection+socitem[i].latitude+"</td></tr>"; // content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间:"+socitem[i].myUploadTime+"</td></tr>"; content += "</table>"; // var infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].hwid, i, myIcon, socitem[i].soc ); map.addOverlay(marker) // 将标注添加到地图中 var circle = new BMap.Circle(point, 6, { strokeColor: 'Blue', 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.6,//图标缩放大小 // strokeColor:'#fff',//设置矢量图标的线填充颜色 // strokeWeight: 1//设置线宽 // }); // var icons = new BMap.IconSequence(sy, '100%', '5%',false);//设置为true,可以对轨迹进行编辑 // //画轨迹 // var polyLine = new BMap.Polyline(arrPois, { // // strokeColor: "blue", //设置颜色 // 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) { // // alert(count < 1); // me._moveNext(++me.i); // return; // } // // alert(count); // 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); // }; // BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。 // BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。 // BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。 // BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。 //添加地图类型控件 // map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));//右上角,默认地图控件 //地图混合 // map.addControl(new BMap.MapTypeControl({ // mapTypes:[ // BMAP_NORMAL_MAP, // BMAP_HYBRID_MAP // ]})); //添加缩略图控件 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.setView({ // rotation: 45, // 设置旋转角度,单位为度(0-360) // tilt: 60 // 设置倾斜角度,单位为度(0-60) // }); //添加地图类型控件 // 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); // map.addEventListener('tilesloaded', function () { // alert('地图加载完成!'); // }); }) }, // 测量百度地图两个点间的距离 // getDistance (itemPoint) { // var map = new BMap.Map('') // var pointB = new BMap.Point(parseFloat(itemPoint.log), parseFloat(itemPoint.lat)) // 店铺的经纬度 // var distance = (map.getDistance(this.pointA, pointB) / 1000).toFixed(2) // 保留小数点后两位 // return distance // }, /* * Lat1 Lung1 表示A点经纬度,Lat2 Lung2 表示B点经纬度; a=Lat1 – Lat2 为两点纬度之差 b=Lung1 * -Lung2 为两点经度之差; * 6378.137为地球半径,单位为公里; * 最新平均半径 大约3959英里(6371.393千米) 。这个数字是地心到地球表面所有各点距离的平均值。 可以这样求:平均半径=(赤道半径&times;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 * 10000d) / 10000d; 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"), //"http://developer.baidu.com/map/jsdemo/img/car.png", // http://webapi.amap.com/images/car.png ~@/assets/img/car.png http://developer.baidu.com/map/jsdemo/img/fox.gif http://developer.baidu.com/map/jsdemo/img/car.png new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), // icon: new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157)), 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,soc) { var markerx = new BMap.Marker(point,{icon:myIcon}); // var markerx = new BMap.Marker(point); //序号为1.2.3.4.....,根据需求更改 // var label = new BMap.Label(i+1, { // offset:new BMap.Size(-3,-5)}); var label = new BMap.Label(paramNumber+" "+soc+"%", { offset:new BMap.Size(-3,-20)}); // label.setStyle({ // // background:'url()', // ~@/assets/img/guiji2.png // // color:'#fff', // // border:'none', // // fontSize:'10px', // // textAlign:'center', // // width:'75px', // // height:'25px', // // lineHeight:'25px', // color: 'red', // 文本颜色 // fontSize: '12px', // 字体大小 // fontFamily: '微软雅黑', // 字体类型 // border: '1px solid blue', // 边框样式 // borderRadius: '4px', // 边框圆角 // padding: '2px', // 内边距 // backgroundColor: 'white' // 背景颜色 // }); //文本标注样式,transform为X轴平移,即文本居中显示 label.setStyle({ color: "#fff", backgroundColor: "rgba(126, 203, 252, 1)",//"rgba(0, 0, 0, 0.5)", border: '1px solid blue', // 边框样式 borderRadius: '4px', // 边框圆角 padding: "0 10px", fontSize: "14px", lineHeight: "20px", border :"0", fontFamily: '微软雅黑', // 字体类型 transform:'translateX(-40%)' }); 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)); // alert("mouseover==="+iw); }); //鼠标划出发生的事件 markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); //点击标记发生的事件,暂不做特殊处理 var that = this; markerx.addEventListener("click", function(e) { // alert("3333333333333333############"+paramNumber) // 以上子类调用父组件方法,适合弹框的页面(自己遇到的,还未查出原因) that.$emit('fatherMethod',paramNumber); // that.getParentMsg(paramNumber) // this.openInfoWindow(new BMap.InfoWindow(iw,opts)); // that.$router.push({ // path: "home", // query: { // paramnumber: paramNumber // }//给跳转页面传递的参数 // }); }); return markerx; }, getParentMsg(paramNumber) { // alert('电池编码:'+paramNumber); let parent = this.$parent; //1.获取父组件对象 console.log('电池编码:'+paramNumber); //2.调用父组件的属性 // alert(parent.timeType); parent.openDetailsDialogHome(paramNumber); //3.调用父组件的方法 // 以上子类调用父组件方法,适合弹框的页面(自己遇到的,还未查出原因) // this.$emit('fatherMethod',0,'','','',markType,alarmType); this.$emit('fatherMethod',paramNumber); }, handler2({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: socitem[socitem.length-1].longitude, lat: socitem[socitem.length-1].latitude}; // 以最新经纬度为中心 this.center = {lng: clng, lat: clat}; //下方为打点代码------------------------------------------------- // var nowIcon = new BMap.Icon( // require("../../../assets/img/guiji2.png"), // new BMap.Size(47, 47), // { // anchor: new BMap.Size(22, 40), // imageOffset: new BMap.Size(0, 0) // } // ); // var myIcon = new BMap.Icon( // "http://developer.baidu.com/map/jsdemo/img/car.png", // new BMap.Size(52, 26), // { // anchor: new BMap.Size(27, 13) // } // ); //http://map.baidu.com/image/us_mk_icon.png //说明:要使用不同的图片,只需要修改图片偏移就可以了,第一行第一列图片是(0, 0 - 0 * 25),第二行第一列图片是(0, 0 - 1 * 25)......以此类推就可以了 var myIcon = new BMap.Icon( require("../../assets/img/mbike1.png"), //"http://api.map.baidu.com/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 checksum = makerArry[i].checksum; var point = new BMap.Point(p0, p1); //118.230272,33.482474 arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; // content = content + "<tr><td> 电池编号:"+socitem[i].hwid+"</td></tr>"; // content = content + "<tr><td> 所属:"+socitem[i].describe+"</td></tr>"; // content = content + "<tr><td> 经纬度:"+socitem[i].longitudeMark+socitem[i].longitude+","+socitem[i].latitudeMark+socitem[i].latitude+"</td></tr>"; // content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; // content = content + "<tr><td> 时间:"+socitem[i].modifyTime+"</td></tr>"; // content += "</table>"; 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 infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].thingId, i, myIcon, socitem[i].soc ); 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, { // strokeColor: "blue", //设置颜色 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) { // alert(count < 1); me._moveNext(++me.i); return; } // alert(count); 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); }; // BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。 // BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。 // BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。 // BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。 //添加地图类型控件 // map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));//右上角,默认地图控件 //地图混合 // map.addControl(new BMap.MapTypeControl({ // mapTypes:[ // BMAP_NORMAL_MAP, // BMAP_HYBRID_MAP // ]})); //添加缩略图控件 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); // map.addEventListener('tilesloaded', function () { // alert('地图加载完成!'); // }); }) }) }, onReady () { this.$nextTick(this.resizeMap) }, resizeMap () { const bm = this.$refs.bm if (bm && bm.map && typeof bm.map.checkResize === 'function') bm.map.checkResize() } } } </script> <style > /* 去除百度地图版权那行字 和 百度logo */ /* .BMap_cpyCtrl { display: none!important; } */ /* .anchorBL { display: none!important; } */ /* 弹出框中标题样式 */ .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 */ /* .anchorBL, .BMap_cpyCtrl { display: none; } */ .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 { /* // top: 43px !important; // left: 215px !important; */ 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>这是百度地图的组件,现在参照百度地图的组件帮我写一个兼容的高德地图的组件,不再使用百度地图,这是高德地图sdk工具类:/** * 高德地图工具类 * 动态加载高德地图SDK */ // 硬编码高德地图配置 let AMAP_KEY = '3534cbaf362e9eca0367f7006aa3a96d'; // 替换为你的实际Key let AMAP_SECURITY_KEY = '06c54e67b74b419c551fcd038b02c825'; // 替换为你的实际安全密钥 let amapLoaded = false; let amapLoading = false; /** * 加载高德地图SDK */ export async function loadAMap() { return new Promise((resolve, reject) => { // 如果已经加载,直接返回 if (window.AMap) { amapLoaded = true; resolve(window.AMap); return; } // 如果正在加载,等待加载完成 if (amapLoading) { const checkInterval = setInterval(() => { if (window.AMap) { clearInterval(checkInterval); amapLoaded = true; resolve(window.AMap); } }, 100); return; } // 开始加载 amapLoading = true; // 配置安全密钥(必须在加载地图之前设置) window._AMapSecurityConfig = { securityJsCode: AMAP_SECURITY_KEY }; // 创建script标签 const script = document.createElement('script'); script.type = 'text/javascript'; // 加载高德地图主文件,包含常用控件和轨迹纠偏服务 script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}&callback=initAMap&plugin=AMap.Scale,AMap.ToolBar,AMap.TrackCorrector`; script.onerror = () => { amapLoading = false; console.error('高德地图加载失败,请检查网络连接或key配置'); reject(new Error('高德地图加载失败,请检查网络连接或key配置')); }; script.onload = () => { console.log('高德地图脚本加载成功'); }; // 设置全局回调 window.initAMap = () => { try { if (window.AMap) { console.log('高德地图初始化成功'); // 等待一小段时间确保所有类都已加载 setTimeout(() => { amapLoaded = true; amapLoading = false; resolve(window.AMap); }, 100); } else { throw new Error('AMap对象未正确初始化'); } } catch (error) { amapLoading = false; console.error('高德地图初始化失败:', error); reject(error); } finally { delete window.initAMap; } }; // 添加到页面 document.head.appendChild(script); }); } /** * 获取高德地图实例(确保已加载) */ export async function getAMap() { if (!amapLoaded) { await loadAMap(); } return window.AMap; }
12-17
高德地图sdk js:/** * 高德地图工具类 * 动态加载高德地图SDK */ // 硬编码高德地图配置 let AMAP_KEY = '3534cbaf362e9eca0367f7006aa3a96d'; // 替换为你的实际Key let AMAP_SECURITY_KEY = '06c54e67b74b419c551fcd038b02c825'; // 替换为你的实际安全密钥 let amapLoaded = false; let amapLoading = false; /** * 加载高德地图SDK */ export async function loadAMap() { return new Promise((resolve, reject) => { // 如果已经加载,直接返回 if (window.AMap) { amapLoaded = true; resolve(window.AMap); return; } // 如果正在加载,等待加载完成 if (amapLoading) { const checkInterval = setInterval(() => { if (window.AMap) { clearInterval(checkInterval); amapLoaded = true; resolve(window.AMap); } }, 100); return; } // 开始加载 amapLoading = true; // 配置安全密钥(必须在加载地图之前设置) window._AMapSecurityConfig = { securityJsCode: AMAP_SECURITY_KEY }; // 创建script标签 const script = document.createElement('script'); script.type = 'text/javascript'; // 加载高德地图主文件,包含常用控件和轨迹纠偏服务 script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}&callback=initAMap&plugin=AMap.Scale,AMap.ToolBar,AMap.TrackCorrector`; script.onerror = () => { amapLoading = false; console.error('高德地图加载失败,请检查网络连接或key配置'); reject(new Error('高德地图加载失败,请检查网络连接或key配置')); }; script.onload = () => { console.log('高德地图脚本加载成功'); }; // 设置全局回调 window.initAMap = () => { try { if (window.AMap) { console.log('高德地图初始化成功'); // 等待一小段时间确保所有类都已加载 setTimeout(() => { amapLoaded = true; amapLoading = false; resolve(window.AMap); }, 100); } else { throw new Error('AMap对象未正确初始化'); } } catch (error) { amapLoading = false; console.error('高德地图初始化失败:', error); reject(error); } finally { delete window.initAMap; } }; // 添加到页面 document.head.appendChild(script); }); } /** * 获取高德地图实例(确保已加载) */ export async function getAMap() { if (!amapLoaded) { await loadAMap(); } return window.AMap; } ,参照 <baidu-map id=“allmap” :center=“center” :zoom=“zoom” @ready=“handler” @click=“getClickInfo” :scroll-wheel-zoom=‘true’ :style=“mapStyle”> <script> export default { name: 'BtAddrBaiDu', data () { return { dataList: [], projectId: 38, // 项目 thingId: "", center: {lng: 114.085947, lat: 22.547}, zoom: 14, // 地图缩放比例,越大越细 point:"", gpsArr:[ { lng:114.000069, lat:22.500069 }, ],//后台拿到的gps点数组 map: '',// 保存地图实例 speed:500,//速度 lushu:{},//路书 batteryId:"电池编号:"+this.$parent.$children[0].hwid, myMap: {}, //地图 headerH: 40, // 顶部导航/页头高度 extraGap: 0, // 额外上下间距 foldBarH: 0 // 如果有折叠条在地图上面就加进去;在下面则不用 } }, computed:{ documentClientHeight: { get () { return this.$store.state.common.documentClientHeight } }, // 动态计算地图高度 mapStyle () { const offset = this.headerH + this.foldBarH + this.extraGap const h = Math.max(600, this.documentClientHeight - offset) // 给个最小值防止过矮 return { height: h + 'px', width: '100%' } } }, watch: { documentClientHeight () { this.$nextTick(this.resizeMap) }, // 如果你有折叠区在地图上方,展开/收起后也重算一次 isExpanded () { this.$nextTick(() => setTimeout(this.resizeMap, 200)) }, isExpandedAll () { this.$nextTick(() => setTimeout(this.resizeMap, 200)) } }, mounted(){ this.handler() // 函数调用activated this.$nextTick(this.resizeMap) window.addEventListener('resize', this.resizeMap) }, activated () { this.handler() }, methods: { init (id,dataList) { this.projectId = id this.dataList = dataList // this.map是百度地图的实例 this.map.clearOverlays(); this.$nextTick(()=>{ //无论有无数,都要画出地图 this.map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); this.map.centerAndZoom(); var arrPois = []; if (this.dataList) { const socitem = this.dataList if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; // this.center = {lng: socitem[socitem.length-1].longitude, lat: socitem[socitem.length-1].latitude}; // 以最新经纬度为中心 if(clng === 'null' || clng === '' || clng === undefined || clng === null || clat === 'null' || clat==='' || clat === undefined || clat === null){ for (let i = 0; i < socitem.length; i++) { if(socitem[i].longitude != '' && socitem[i].longitude != undefined && socitem[i].longitude != null && socitem[i].latitude !='' && socitem[i].latitude != undefined && socitem[i].latitude != null){ clng = socitem[i].longitude; clat = socitem[i].latitude; } } } this.center = {lng: clng, lat: clat}; //http://map.baidu.com/image/us_mk_icon.png //说明:要使用不同的图片,只需要修改图片偏移就可以了,第一行第一列图片是(0, 0 - 0 * 25),第二行第一列图片是(0, 0 - 1 * 25)......以此类推就可以了 // var myIcon = new BMap.Icon( // require("../../assets/img/markers.png"), // // "http://api.map.baidu.com/img/markers.png", // new BMap.Size(23, 25), { // offset: new BMap.Size(10, 25), // 指定定位位置 // imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 // }); var myIcon = new BMap.Icon( require("../../assets/img/mbike1.png"), // "http://developer.baidu.com/map/jsdemo/img/car.png", // http://webapi.amap.com/images/car.png ~@/assets/img/car.png http://developer.baidu.com/map/jsdemo/img/fox.gif http://developer.baidu.com/map/jsdemo/img/car.png new BMap.Size(50, 35), { anchor: new BMap.Size(12, 28) } ); for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; // var checksum = makerArry[i].checksum; var point = new BMap.Point(p0, p1); //118.230272,33.482474 arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td style='line-height: 1.5;font-size: 15px;font-weight: bold; color: rgba(126, 203, 252, 1);'> 电量:"+socitem[i].soc+" %</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> 电池编号:"+socitem[i].hwid+"</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> sn码:"+socitem[i].sn+"</td></tr>"; content = content + "<tr><td> 经纬度:"+socitem[i].longitudeDirection+socitem[i].longitude+","+socitem[i].latitudeDirection+socitem[i].latitude+"</td></tr>"; // content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间:"+socitem[i].myUploadTime+"</td></tr>"; content += "</table>"; // var infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].hwid, i, myIcon, socitem[i].soc ); this.map.addOverlay(marker) // 将标注添加到地图中 var circle = new BMap.Circle(point, 6, { strokeColor: 'Blue', strokeWeight: 8, strokeOpacity: 2, Color: 'Blue', fillColor: '#f03' }) this.map.addOverlay(circle) } } else { console.log('没有数据的显示') this.soctitle = '暂无数据显示' } } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } //添加缩略图控件 this.map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); //添加缩放平移控件 this.map.addControl(new BMap.NavigationControl()); //添加比例尺控件 this.map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); // 设置地图视角:倾斜角和旋转角。无效 // this.map.setView({ // rotation: 45, // 设置旋转角度,单位为度(0-360) // tilt: 60 // 设置倾斜角度,单位为度(0-60) // }); //添加地图类型控件 // map.addControl(new BMap.MapTypeControl()); // 普通街道视图:BMAP_NORMAL_MAP // 三维视图:BMAP_PERSPECTIVE_MAP // 卫星视图:BMAP_SATELLITE_MAP // 卫星和路网的混合视图:BMAP_HYBRID_MAP this.map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT})); //负责切换地图类型的控件 // this.initLushu(this.map, arrPois, this.batteryId); // this.map.addEventListener('tilesloaded', function () { // alert('地图加载完成!'); // }); }) this.handler() }, handler({BMap, map}){ this.$nextTick(()=>{ this.map = map; //无论有无数,都要画出地图 map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); map.centerAndZoom(); var arrPois = []; if (this.dataList) { const socitem = this.dataList if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; if(clng === 'null' || clng === '' || clng === undefined || clng === null || clat === 'null' || clat==='' || clat === undefined || clat === null){ for (let i = 0; i < socitem.length; i++) { if(socitem[i].longitude != '' && socitem[i].longitude != undefined && socitem[i].longitude != null && socitem[i].latitude !='' && socitem[i].latitude != undefined && socitem[i].latitude != null){ clng = socitem[i].longitude; clat = socitem[i].latitude; } } } // this.center = {lng: socitem[socitem.length-1].longitude, lat: socitem[socitem.length-1].latitude}; // 以最新经纬度为中心 this.center = {lng: clng, lat: clat}; //http://map.baidu.com/image/us_mk_icon.png //说明:要使用不同的图片,只需要修改图片偏移就可以了,第一行第一列图片是(0, 0 - 0 * 25),第二行第一列图片是(0, 0 - 1 * 25)......以此类推就可以了 // var myIcon = new BMap.Icon( // require("../../assets/img/markers.png"), // // "http://api.map.baidu.com/img/markers.png", // new BMap.Size(23, 25), { // offset: new BMap.Size(10, 25), // 指定定位位置 // imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 // }); // var myIcon = new BMap.Icon( // 自定义图标 // require("../../assets/img/car.png"), // new BMap.Size(52, 26) // 图标的宽度和高度 // ); // myIcon.setImageSize(new BMap.Size(52,26)); var myIcon = new BMap.Icon( require("../../assets/img/mbike1.png"), // "http://developer.baidu.com/map/jsdemo/img/car.png", // http://webapi.amap.com/images/car.png ~@/assets/img/car.png http://developer.baidu.com/map/jsdemo/img/fox.gif http://developer.baidu.com/map/jsdemo/img/car.png new BMap.Size(50, 35), { anchor: new BMap.Size(12, 28) } ); //打点图标样式------------------------------------------------------ for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; // var checksum = makerArry[i].checksum; var point = new BMap.Point(p0, p1); //118.230272,33.482474 arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td style='line-height: 1.5;font-size: 15px;font-weight: bold; color: rgba(126, 203, 252, 1);'> 电量:"+socitem[i].soc+" %</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> 电池编号:"+socitem[i].hwid+"</td></tr>"; content = content + "<tr><td style='font-weight: bold; color: #fff;'> sn码:"+socitem[i].sn+"</td></tr>"; content = content + "<tr><td> 经纬度:"+socitem[i].longitudeDirection+socitem[i].longitude+","+socitem[i].latitudeDirection+socitem[i].latitude+"</td></tr>"; // content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间:"+socitem[i].myUploadTime+"</td></tr>"; content += "</table>"; // var infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].hwid, i, myIcon, socitem[i].soc ); map.addOverlay(marker) // 将标注添加到地图中 var circle = new BMap.Circle(point, 6, { strokeColor: 'Blue', 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.6,//图标缩放大小 // strokeColor:'#fff',//设置矢量图标的线填充颜色 // strokeWeight: 1//设置线宽 // }); // var icons = new BMap.IconSequence(sy, '100%', '5%',false);//设置为true,可以对轨迹进行编辑 // //画轨迹 // var polyLine = new BMap.Polyline(arrPois, { // // strokeColor: "blue", //设置颜色 // 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) { // // alert(count < 1); // me._moveNext(++me.i); // return; // } // // alert(count); // 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); // }; // BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。 // BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。 // BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。 // BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。 //添加地图类型控件 // map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));//右上角,默认地图控件 //地图混合 // map.addControl(new BMap.MapTypeControl({ // mapTypes:[ // BMAP_NORMAL_MAP, // BMAP_HYBRID_MAP // ]})); //添加缩略图控件 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.setView({ // rotation: 45, // 设置旋转角度,单位为度(0-360) // tilt: 60 // 设置倾斜角度,单位为度(0-60) // }); //添加地图类型控件 // 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); // map.addEventListener('tilesloaded', function () { // alert('地图加载完成!'); // }); }) }, // 测量百度地图两个点间的距离 // getDistance (itemPoint) { // var map = new BMap.Map('') // var pointB = new BMap.Point(parseFloat(itemPoint.log), parseFloat(itemPoint.lat)) // 店铺的经纬度 // var distance = (map.getDistance(this.pointA, pointB) / 1000).toFixed(2) // 保留小数点后两位 // return distance // }, /* * Lat1 Lung1 表示A点经纬度,Lat2 Lung2 表示B点经纬度; a=Lat1 – Lat2 为两点纬度之差 b=Lung1 * -Lung2 为两点经度之差; * 6378.137为地球半径,单位为公里; * 最新平均半径 大约3959英里(6371.393千米) 。这个数字是地心到地球表面所有各点距离的平均值。 可以这样求:平均半径=(赤道半径&times;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 * 10000d) / 10000d; 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"), //"http://developer.baidu.com/map/jsdemo/img/car.png", // http://webapi.amap.com/images/car.png ~@/assets/img/car.png http://developer.baidu.com/map/jsdemo/img/fox.gif http://developer.baidu.com/map/jsdemo/img/car.png new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), // icon: new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157)), 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,soc) { var markerx = new BMap.Marker(point,{icon:myIcon}); // var markerx = new BMap.Marker(point); //序号为1.2.3.4.....,根据需求更改 // var label = new BMap.Label(i+1, { // offset:new BMap.Size(-3,-5)}); var label = new BMap.Label(paramNumber+" "+soc+"%", { offset:new BMap.Size(-3,-20)}); // label.setStyle({ // // background:'url()', // ~@/assets/img/guiji2.png // // color:'#fff', // // border:'none', // // fontSize:'10px', // // textAlign:'center', // // width:'75px', // // height:'25px', // // lineHeight:'25px', // color: 'red', // 文本颜色 // fontSize: '12px', // 字体大小 // fontFamily: '微软雅黑', // 字体类型 // border: '1px solid blue', // 边框样式 // borderRadius: '4px', // 边框圆角 // padding: '2px', // 内边距 // backgroundColor: 'white' // 背景颜色 // }); //文本标注样式,transform为X轴平移,即文本居中显示 label.setStyle({ color: "#fff", backgroundColor: "rgba(126, 203, 252, 1)",//"rgba(0, 0, 0, 0.5)", border: '1px solid blue', // 边框样式 borderRadius: '4px', // 边框圆角 padding: "0 10px", fontSize: "14px", lineHeight: "20px", border :"0", fontFamily: '微软雅黑', // 字体类型 transform:'translateX(-40%)' }); 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)); // alert("mouseover==="+iw); }); //鼠标划出发生的事件 markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); //点击标记发生的事件,暂不做特殊处理 var that = this; markerx.addEventListener("click", function(e) { // alert("3333333333333333############"+paramNumber) // 以上子类调用父组件方法,适合弹框的页面(自己遇到的,还未查出原因) that.$emit('fatherMethod',paramNumber); // that.getParentMsg(paramNumber) // this.openInfoWindow(new BMap.InfoWindow(iw,opts)); // that.$router.push({ // path: "home", // query: { // paramnumber: paramNumber // }//给跳转页面传递的参数 // }); }); return markerx; }, getParentMsg(paramNumber) { // alert('电池编码:'+paramNumber); let parent = this.$parent; //1.获取父组件对象 console.log('电池编码:'+paramNumber); //2.调用父组件的属性 // alert(parent.timeType); parent.openDetailsDialogHome(paramNumber); //3.调用父组件的方法 // 以上子类调用父组件方法,适合弹框的页面(自己遇到的,还未查出原因) // this.$emit('fatherMethod',0,'','','',markType,alarmType); this.$emit('fatherMethod',paramNumber); }, handler2({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: socitem[socitem.length-1].longitude, lat: socitem[socitem.length-1].latitude}; // 以最新经纬度为中心 this.center = {lng: clng, lat: clat}; //下方为打点代码------------------------------------------------- // var nowIcon = new BMap.Icon( // require("../../../assets/img/guiji2.png"), // new BMap.Size(47, 47), // { // anchor: new BMap.Size(22, 40), // imageOffset: new BMap.Size(0, 0) // } // ); // var myIcon = new BMap.Icon( // "http://developer.baidu.com/map/jsdemo/img/car.png", // new BMap.Size(52, 26), // { // anchor: new BMap.Size(27, 13) // } // ); //http://map.baidu.com/image/us_mk_icon.png //说明:要使用不同的图片,只需要修改图片偏移就可以了,第一行第一列图片是(0, 0 - 0 * 25),第二行第一列图片是(0, 0 - 1 * 25)......以此类推就可以了 var myIcon = new BMap.Icon( require("../../assets/img/mbike1.png"), //"http://api.map.baidu.com/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 checksum = makerArry[i].checksum; var point = new BMap.Point(p0, p1); //118.230272,33.482474 arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; // content = content + "<tr><td> 电池编号:"+socitem[i].hwid+"</td></tr>"; // content = content + "<tr><td> 所属:"+socitem[i].describe+"</td></tr>"; // content = content + "<tr><td> 经纬度:"+socitem[i].longitudeMark+socitem[i].longitude+","+socitem[i].latitudeMark+socitem[i].latitude+"</td></tr>"; // content = content + "<tr><td> 与最新点距离:"+distance.toFixed(2)+"m</td></tr>"; // content = content + "<tr><td> 时间:"+socitem[i].modifyTime+"</td></tr>"; // content += "</table>"; 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 infoMessage = "<br><div class='nodate'>无数据!</div><br><span class='reminder'>点击标记获取更多信息</span>"; //调用创建marker标记的方法, var marker = this.createMarker( point, content, socitem[i].thingId, i, myIcon, socitem[i].soc ); 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, { // strokeColor: "blue", //设置颜色 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) { // alert(count < 1); me._moveNext(++me.i); return; } // alert(count); 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); }; // BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。 // BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。 // BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。 // BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。 //添加地图类型控件 // map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));//右上角,默认地图控件 //地图混合 // map.addControl(new BMap.MapTypeControl({ // mapTypes:[ // BMAP_NORMAL_MAP, // BMAP_HYBRID_MAP // ]})); //添加缩略图控件 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); // map.addEventListener('tilesloaded', function () { // alert('地图加载完成!'); // }); }) }) }, onReady () { this.$nextTick(this.resizeMap) }, resizeMap () { const bm = this.$refs.bm if (bm && bm.map && typeof bm.map.checkResize === 'function') bm.map.checkResize() } } } </script> <style > /* 去除百度地图版权那行字 和 百度logo */ /* .BMap_cpyCtrl { display: none!important; } */ /* .anchorBL { display: none!important; } */ /* 弹出框中标题样式 */ .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 */ /* .anchorBL, .BMap_cpyCtrl { display: none; } */ .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 { /* // top: 43px !important; // left: 215px !important; */ 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>实现高德地图组件
12-18
<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;"> <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> <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> </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:300, lushu:{}, batteryId: "电池编号:"+this.$parent.$children[0].hwid, myMap: {} } }, methods: { searchConfirm() { this.play(3); this.loadMapData(); }, handler({BMap, map}) { this.BMapObj = BMap; this.mapObj = map; this.isMapReady = true; this.loadMapData(); }, loadMapData() { if (!this.isMapReady) return; // 清除之前的轨迹线和标记 const overlays = this.mapObj.getOverlays(); overlays.forEach(overlay => { this.mapObj.removeOverlay(overlay); }); 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}; 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); } } else { console.log('没有数据的显示') this.soctitle = '暂无数据显示' } } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.5, strokeColor:'#CC0000', strokeWeight: 5 }); var polyLine = new BMap.Polyline(arrPois, { strokeWeight: 5, strokeOpacity: 0.5, strokeColor: "#000000", enableEditing: false, enableClicking: false }); 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: "#CC0000", strokeWeight: 5, 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; 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, landmarkPois: [ { lng:114.52785300795644, lat:38.14758574827796, html: "加油站", pauseTime: 2 } ] }); }, play(val) { 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; } }, }} </script> <style > /* .anchorBL, .BMap_cpyCtrl { display: none; } */ .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: 9rem; margin-left: 5rem; 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> 分析该页面的代码,我想要小车不仅要显示电池编号,还要显示上传时间uploadTime、经纬度,不改变其余逻辑代码功能,改完后给我完整的代码
09-18
代码转载自:https://pan.quark.cn/s/a4b39357ea24 本文重点阐述了利用 LabVIEW 软件构建的锁相放大器的设计方案及其具体实施流程,并探讨了该设备在声波相位差定位系统中的实际运用情况。 锁相放大器作为一项基础测量技术,其核心功能在于能够精确锁定微弱信号的频率参数并完成相关测量工作。 在采用 LabVIEW 软件开发的锁相放大器系统中,通过计算测量信号与两条参考信号之间的互相关函数,实现对微弱信号的频率锁定,同时输出被测信号的幅值信息。 虚拟仪器技术是一种基于计算机硬件平台的仪器系统,其显著特征在于用户可以根据实际需求自主设计仪器功能,配备虚拟化操作界面,并将测试功能完全由专用软件程序实现。 虚拟仪器系统的基本架构主要由计算机主机、专用软件程序以及硬件接口模块等核心部件构成。 虚拟仪器最突出的优势在于其功能完全取决于软件编程,用户可以根据具体应用场景灵活调整系统功能参数。 在基于 LabVIEW 软件开发的锁相放大器系统中,主要运用 LabVIEW 软件平台完成锁相放大器功能的整体设计。 LabVIEW 作为一个图形化编程环境,能够高效地完成虚拟仪器的开发工作。 借助 LabVIEW 软件,可以快速构建锁相放大器的用户操作界面,并且可以根据实际需求进行灵活调整和功能扩展。 锁相放大器系统的关键构成要素包括测量信号输入通道、参考信号输入通道、频率锁定处理单元以及信号幅值输出单元。 测量信号是系统需要检测的对象,参考信号则用于引导系统完成对测量信号的频率锁定。 频率锁定处理单元负责实现测量信号的锁定功能,信号幅值输出单元则负责输出被测信号的幅值大小。 在锁相放大器的实际实现过程中,系统采用了双路参考信号输入方案来锁定测量信号。 通过分析两路参考信号之间的相...
边缘计算环境中基于启发式算法的深度神经网络卸载策略(Matlab代码实现)内容概要:本文介绍了在边缘计算环境中,利用启发式算法实现深度神经网络任务卸载的策略,并提供了相应的Matlab代码实现。文章重点探讨了如何通过合理的任务划分与调度,将深度神经网络的计算任务高效地卸载到边缘服务器,从而降低终端设备的计算负担、减少延迟并提高整体系统效率。文中涵盖了问题建模、启发式算法设计(如贪心策略、遗传算法、粒子群优化等可能的候选方法)、性能评估指标(如能耗、延迟、资源利用率)以及仿真实验结果分析等内容,旨在为边缘智能计算中的模型推理优化提供可行的技术路径。; 适合人群:具备一定编程基础,熟悉Matlab工具,从事边缘计算、人工智能、物联网或智能系统优化方向的研究生、科研人员及工程技术人员。; 使用场景及目标:①研究深度神经网络在资源受限设备上的部署与优化;②探索边缘计算环境下的任务卸载机制与算法设计;③通过Matlab仿真验证不同启发式算法在实际场景中的性能表现,优化系统延迟与能耗。; 阅读建议:建议读者结合提供的Matlab代码进行实践操作,重点关注算法实现细节与仿真参数设置,同时可尝试复现并对比不同启发式算法的效果,以深入理解边缘计算中DNN卸载的核心挑战与解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值