如何使用BMap.Point传递变量、存储数据？

最新推荐文章于 2023-08-04 14:09:59 发布
原创 最新推荐文章于 2023-08-04 14:09:59 发布 · 1.4w 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#BMap #BMap.Point #PointCollection #变量 #参数

在开发中使用到了百度地图进行开发，用于展示企业位置。由于数据量庞大，如果使用marker,将会造成界面卡顿，处理慢的问题。

在查看百度地图API示例是发现了海量点这个东西，还别说对于大数量的点加载起来也很快。于是就使用海量点进行开发。

但是从demo中仅能获取到点击坐标的经度、纬度。无法再获取到其他信息，用户自定义的数据也不行。

于是从万能的网上寻求解决办法，有位朋友的解决方式是获取到经度、纬度之后，通过经度和纬度循环比对，找出自己的用户数据，也算是一种解决方案。但是这种方案的弊端非常明显，首先如果数据量巨大，循环需要花费大量的时间。其次对于位置相同的点，无法区分到底是哪条数据。

后来去官方论坛上，发现好多人也遇到了这个问题，并且暂时还没有解决方案，版主基本的回答是暂时还没有、不可以...

后来在无意的试验中找到了解决方法，废话少说，上代码！

<!DOCTYPE HTML>
<html>
<head>
  <title>加载海量点</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <style type="text/css">
    html,body{
        margin:0;
        width:100%;
        height:100%;
        background:
最低0.47元/天 解锁文章
BMap添加海量点数据，BMap.Point携带数据
vili_sky的博客
05-23 1万+
在开发web项目的过程中使用到了百度地图，加载海量点的功能BMap.PointCollection，想在点的点击事件中获取到其他information，可以让BMap.Point在加入到点集合BMap.PointCollection之前携带数据,在点击这个点是就可得到BMap.Point，从而得到它携带的除经纬度之外的信息数据.
bmap标记点移动后显示直线轨迹
qq_42720749的博客
06-03 535
1. 获取折线起始点 首先需要利用百度地图折线的api来绘制直线,获取起始坐标 shartPt = new BMap.Point(item.lon, item.lati) qi'zho
百度地图 web 开发 BMap.point格式
helixsky的博客
07-19 2万+
var map = new BMap.Map('container'); // 创建地图实例 var npointJ = 116.404; var npointW = 39.915; var point = new BMap.Point(npointJ,npointW); // 创建点坐标 map.centerAndZoom(point, 11); // 初始化地图， 设置中心点坐标和地...
百度地图API之new BMap.Point
kakarot5的专栏
10-11 1万+
new BMap.Point(Float,Float) 
<template> <div> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" style="height:9.45rem;width: 100%;" @click="getClickInfo" :scroll-wheel-zoom='true'> <div class="drawing-panel" style="z-index: 99;"> <button class = "btn" @click='play(1)' size="small">播放</button> <button class = "btn" @click='play(2)' size="small">暂停</button> <button class = "btn" @click='play(3)' size="small">停止</button> </div> </baidu-map> </div> </template> <script> export default { name: 'BtAddrBaiDu', data () { return { center: {lng: 114.085947, lat: 22.547}, zoom: 15, // 地图缩放比例，越大越细 point:"", gpsArr:[ { lng:114.000069, lat:22.500069 }, ],//后台拿到的gps点数组 speed:500,//速度 lushu:{},//路书 batteryId:"电池编号:"+this.$parent.$children[0].hwid, myMap: {} //地图 } }, mounted(){ this.handler() // 函数调用 }, methods: { handler({BMap, map}){ this.$nextTick(()=>{ this.$http({ url: this.$http.adornUrl('/mqtt/mtgpslocationinfo/queryGpsLocationInfos'), method: 'get', params: this.$http.adornParams({ 'limit': 50, 'thingid': this.$parent.$children[0].hwid //从父类的一个子类中获取hwid，子类中的hwid都是一样的 this.detailsparentmsg }) }).then(({data}) => { //无论有无数，都要画出地图 map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); map.centerAndZoom(); var arrPois = []; if (data && data.code === 0) { const socitem = data.data if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; this.center = {lng: clng, lat: clat}; var myIcon = new BMap.Icon( require("../../../assets/img/markers.png"), new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), // 指定定位位置 imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 }); for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; var point = new BMap.Point(p0, p1); arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td> 电池编号："+socitem[i].thingId+"</td></tr>"; content = content + "<tr><td> 经纬度："+socitem[i].longitudedirectionValue+socitem[i].longitude+"，"+socitem[i].latitudedirectionValue+socitem[i].latitude+"</td></tr>"; content = content + "<tr><td> 与最新点距离："+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间："+socitem[i].uploadTime+"</td></tr>"; content += "</table>"; //调用创建marker标记的方法， var marker = this.createMarker( point, content, socitem[i].thingId, i, myIcon ); map.addOverlay(marker) // 将标注添加到地图中 var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 8, strokeOpacity: 2, Color: 'Blue', fillColor: '#f03' }) map.addOverlay(circle) } } else { console.log('没有数据的显示') this.soctitle = '暂无数据显示' } } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } //绘制箭头及其样式 var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.3,//图标缩放大小 strokeColor:'#fff',//设置矢量图标的线填充颜色 strokeWeight: 1//设置线宽 }); var icons = new BMap.IconSequence(sy, '100%', '5%',false);//设置为true，可以对轨迹进行编辑 //画轨迹 var polyLine = new BMap.Polyline(arrPois, { strokeWeight: 2, //宽度 strokeOpacity: 0.5, //透明度,取值范围0 - 1 strokeColor:"#303133",//设置颜色 #4C7FED #303133 #18a45b enableEditing: false,//是否启用线编辑，默认为false enableClicking: false,//是否响应点击事件，默认为true icons:[icons] }); map.addOverlay(polyLine); //画轨迹结束 BMapLib.LuShu.prototype._move = function(initPos, targetPos, effect) { var pointsArr = [initPos, targetPos]; //点数组 var me = this, //当前的帧数 currentCount = 0, //步长，米/秒 timer = 10, step = this._opts.speed / (1000 / timer), //初始坐标 init_pos = this._projection.lngLatToPoint(initPos), //获取结束点的(x,y)坐标 target_pos = this._projection.lngLatToPoint(targetPos), //总的步长 count = Math.round(me._getDistance(init_pos, target_pos) / step); //显示折线 //如果想显示小车走过的痕迹，放开这段代码就行 this._map.addOverlay( new BMap.Polyline(pointsArr, { strokeColor: "#111", strokeWeight: 3, strokeOpacity: 0.5 }) ); // 画线 //如果小于1直接移动到下一点 if (count < 1) { me._moveNext(++me.i); return; } me._intervalFlag = setInterval(function() { //两点之间当前帧数大于总帧数的时候，则说明已经完成移动 if (currentCount >= count) { clearInterval(me._intervalFlag); //移动的点已经超过总的长度 if (me.i > me._path.length) { return; } //运行下一个点 me._moveNext(++me.i); } else { currentCount++; var x = effect(init_pos.x, target_pos.x, currentCount, count), y = effect(init_pos.y, target_pos.y, currentCount, count), pos = me._projection.pointToLngLat(new BMap.Pixel(x, y)); //设置marker if (currentCount == 1) { var proPos = null; if (me.i - 1 >= 0) { proPos = me._path[me.i - 1]; } if (me._opts.enableRotation == true) { me.setRotation(proPos, initPos, targetPos); } if (me._opts.autoView) { if (!me._map.getBounds().containsPoint(pos)) { me._map.setCenter(pos); } } } //正在移动 me._marker.setPosition(pos); //设置自定义overlay的位置 me._setInfoWin(pos); } }, timer); }; //添加缩略图控件 map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); //添加缩放平移控件 map.addControl(new BMap.NavigationControl()); //添加比例尺控件 map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); //添加地图类型控件 // map.addControl(new BMap.MapTypeControl()); // 普通街道视图：BMAP_NORMAL_MAP // 三维视图：BMAP_PERSPECTIVE_MAP // 卫星视图：BMAP_SATELLITE_MAP // 卫星和路网的混合视图：BMAP_HYBRID_MAP map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT})); //负责切换地图类型的控件 this.initLushu(map, arrPois, this.batteryId); }) }) }, // 测量百度地图两个点间的距离 /* * Lat1 Lung1 表示A点经纬度，Lat2 Lung2 表示B点经纬度； a=Lat1 – Lat2 为两点纬度之差 b=Lung1 * -Lung2 为两点经度之差； * 6378.137为地球半径，单位为公里； * 最新平均半径 大约3959英里(6371.393千米) 。这个数字是地心到地球表面所有各点距离的平均值。 可以这样求：平均半径=(赤道半径×2+极半径)/3 地球半径有时被使用作为距离单位, 特别是在天文学和地质学中常用。它通常用RE表示。 地球大概半径6370.856千米。 * 计算出来的结果单位为公里。 * 经过经纬度获取距离(单位：公里) * @param lat1 * @param lng1 * @param lat2 * @param lng2 * @return */ getDistance(lat1,lng1,lat2,lng2) { let EARTH_RADIUS = 6378.137; let radLat1 = this.rad(lat1); let radLat2 = this.rad(lat2); let a = radLat1 - radLat2; let b = this.rad(lng1) - this.rad(lng2); let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); s = s * EARTH_RADIUS; s = Math.round(s * 10000) / 10000; s = s*1000; //乘以1000是换算成米 return s; }, rad(d){ return d * Math.PI / 180.0; }, initLushu(map, arrPois, batteryId) { this.lushu = new BMapLib.LuShu(map, arrPois, { defaultContent: batteryId, // autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整 icon: new BMap.Icon( require("../../../assets/img/mybike2.png"), new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), speed: this.speed, enableRotation: true, //是否设置marker随着道路的走向进行旋转 landmarkPois: [ { lng:114.52785300795644, lat:38.14758574827796, html: "加油站", pauseTime: 2 } ] }); }, play(val) { // 动图播放 if (this.arrIndex >= this.gpsArr.length - 3) { this.arrIndex = 0; } switch (val) { case 1: this.lushu.start(); break; case 2: this.lushu.pause(); break; case 3: this.lushu.stop(); this.arrIndex = 0; this.percentage = 0; break; } }, //创建maeker和infowindow //传入的参数为：坐标，弹框中要显示的信息，厂区号 createMarker(point, iw, paramNumber,i,myIcon) { var markerx = new BMap.Marker(point); //序号为1.2.3.4.....，根据需求更改 var label = new BMap.Label(i+1, { offset:new BMap.Size(-3,-5)}); label.setStyle({ background:'url()', color:'#fff', border:'none', fontSize:'12px', textAlign:'center', width:'25px', height:'25px', lineHeight:'25px' }); markerx.setLabel(label) //将序号放入标记中 markerx.setZIndex(9999) //在路线之上 覆盖路线 var opts = { width: 300, // 信息窗口宽度 height: 180, // 信息窗口高度 title: '<h4>坐标信息'+'</h4>', // 信息窗口标题 enableMessage: true, //设置允许信息窗发送短息 message: "" } //鼠标停留发生的事件 markerx.addEventListener("mouseover", function(e) { this.openInfoWindow(new BMap.InfoWindow(iw,opts)); }); //鼠标划出发生的事件 markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); //点击标记发生的事件，暂不做特殊处理 var that = this; markerx.addEventListener("click", function(e) { }); return markerx; } }} <style > /* 弹出框中标题样式 */ .title { color: darkgreen; text-align: center; height: 0.125rem; } /* 弹出框中提示“无数据”的样式 */ .nodate { color: dimgrey; text-align: center; } /* 弹出框底部的点击提示样式 */ .reminder { font-size: 0.15rem; color: darkcyan; margin-left: 1.25rem; } .btn { width: 1.125rem; height: 0.375rem; float: left; background-color: #fff; color: rgba(27, 142, 236, 1); font-size: 0.175rem; border:0.0125rem solid rgba(27, 142, 236, 1); border-radius: 0.0625rem; margin: 0 0.0625rem; text-align: center; line-height: 0.375rem; } .btn:hover { background-color: rgba(27, 142, 236, 0.8); color: #fff; } .drawing-panel { z-index: 999; position: fixed; bottom: 1.3rem; margin-left: 0.3rem; padding: 0.12rem 0.12rem; border-radius: .05rem; background-color: #fff; box-shadow: 0 0.025rem 0.075rem 0 rgba(27, 142, 236, 0.5); } /* 以下为坐标 弹框信息的样式 */ /*地图标题*/ /* 去除百度地图版权那行字 和 百度logo */ .BMap_bubble_title { color: white; font-size: 0.1625rem; font-weight: bold; text-align: left; padding-left: 0.0625rem; padding-top: 0.0625rem; border-bottom: 0.0125rem solid gray; background-color: #409EFF; } /* 消息内容 */ .BMap_bubble_content { background-color: rgba(40, 40, 40, 0.8); padding-left: 0.0625rem; padding-top: 0.0625rem; padding-bottom: 0.125rem; border-bottom-left-radius: 0.1rem; border-bottom-right-radius: 0.1rem; } /* 内容 */ .BMap_pop div:nth-child(9) { top: 0.4375rem !important; border-radius: 0.0625rem; } .BMap_pop div:nth-child(5) { display: none; } /* 左上角删除按键 */ .BMap_pop img { display: none; } .BMap_top { display: none; } .BMap_bottom { display: none; } .BMap_center { display: none; } /* 隐藏边角 */ .BMap_pop div:nth-child(1) div { display: none; } .BMap_pop div:nth-child(3) { display: none; } .BMap_pop div:nth-child(7) { display: none; } </style>在顶部添加两个时间范围筛选作为入参，并且去掉点位图标，鼠标靠近就显示对应点位卡片信息，避免[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'BMap')"，改完后，给我完整的代码
08-21
修复BMap未定义的问题：确保在handler方法的参数中获取BMap和map，并使用它们，而不是在方法内部通过全局变量访问（因为全局变量可能未加载完成）。 8. 注意：由于我们使用了透明的marker，所以需要调整marker的...
<template> <div> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" style="height:9.45rem;width: 100%;" @click="getClickInfo" :scroll-wheel-zoom='true'> <div class="drawing-panel" style="z-index: 99;"> <button class = "btn" @click='play(1)' size="small">播放</button> <button class = "btn" @click='play(2)' size="small">暂停</button> <button class = "btn" @click='play(3)' size="small">停止</button> </div> </baidu-map> </div> </template> <script> export default { name: 'BtAddrBaiDu', data () { return { center: {lng: 114.085947, lat: 22.547}, zoom: 15, // 地图缩放比例，越大越细 point:"", gpsArr:[ { lng:114.000069, lat:22.500069 }, // { // lng:114.54050114953694, // lat:38.13759635572114 // }, // { // lng:114.56579743269792, // lat:38.12419932394176 // }, // { // lng:114.5908781225365, // lat:38.12056580319661 // }, // { // lng:114.6115750814864, // lat:38.11613720325717 // }, ],//后台拿到的gps点数组 speed:500,//速度 lushu:{},//路书 batteryId:"电池编号:"+this.$parent.$children[0].hwid, myMap: {} //地图 } }, mounted(){ this.handler() // 函数调用 }, methods: { handler({BMap, map}){ this.$nextTick(()=>{ this.$http({ url: this.$http.adornUrl('/mqtt/mtgpslocationinfo/queryGpsLocationInfos'), method: 'get', params: this.$http.adornParams({ 'limit': 50, 'thingid': this.$parent.$children[0].hwid //从父类的一个子类中获取hwid，子类中的hwid都是一样的 this.detailsparentmsg }) }).then(({data}) => { //无论有无数，都要画出地图 map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); map.centerAndZoom(); var arrPois = []; if (data && data.code === 0) { const socitem = data.data if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; // this.center = {lng: 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/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) // 设置图片偏移 }); //打点图标样式------------------------------------------------------ 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].soc+" %</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 ); 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('地图加载完成！'); // }); }) }) }, // 测量百度地图两个点间的距离 // 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千米) 。这个数字是地心到地球表面所有各点距离的平均值。 可以这样求：平均半径=(赤道半径×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) { // 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)}); label.setStyle({ background:'url()', // ~@/assets/img/guiji2.png color:'#fff', border:'none', fontSize:'12px', textAlign:'center', width:'25px', height:'25px', lineHeight:'25px' }); markerx.setLabel(label) //将序号放入标记中 markerx.setZIndex(9999) //在路线之上 覆盖路线 var opts = { width: 300, // 信息窗口宽度 height: 180, // 信息窗口高度 title: '<h4>坐标信息'+'</h4>', // 信息窗口标题 enableMessage: true, //设置允许信息窗发送短息 message: "" } //鼠标停留发生的事件 markerx.addEventListener("mouseover", function(e) { this.openInfoWindow(new BMap.InfoWindow(iw,opts)); // alert("mouseover==="+iw); }); //鼠标划出发生的事件 markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); //点击标记发生的事件，暂不做特殊处理 var that = this; markerx.addEventListener("click", function(e) { // this.openInfoWindow(new BMap.InfoWindow(iw,opts)); // 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; } .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>给百度地图加上upload_time时间筛选
08-22
map.centerAndZoom(new BMap.Point(clng, clat), this.zoom); // 调整中心 // 绘制每个点 // ... 类似之前handler中的代码，循环data，创建点，并添加到arrPois，同时添加标记和圆圈 // 注意：这里我们也要计算...
<template> <div> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" style="height:9.45rem;width: 100%;" @click="getClickInfo" :scroll-wheel-zoom='true'> <div class="drawing-panel" style="z-index: 99;"> <button class = "btn" @click='play(1)' size="small">播放</button> <button class = "btn" @click='play(2)' size="small">暂停</button> <button class = "btn" @click='play(3)' size="small">停止</button> </div> </baidu-map> </div> </template> <script> export default { name: 'BtAddrBaiDu', data () { return { center: {lng: 114.085947, lat: 22.547}, zoom: 15, // 地图缩放比例，越大越细 point:"", gpsArr:[ { lng:114.000069, lat:22.500069 }, ],//后台拿到的gps点数组 speed:500,//速度 lushu:{},//路书 batteryId:"电池编号:"+this.$parent.$children[0].hwid, myMap: {} //地图 } }, mounted(){ this.handler() // 函数调用 }, methods: { handler({BMap, map}){ this.$nextTick(()=>{ this.$http({ url: this.$http.adornUrl('/mqtt/mtgpslocationinfo/queryGpsLocationInfos'), method: 'get', params: this.$http.adornParams({ 'limit': 50, 'thingid': this.$parent.$children[0].hwid //从父类的一个子类中获取hwid，子类中的hwid都是一样的 this.detailsparentmsg }) }).then(({data}) => { //无论有无数，都要画出地图 map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); map.centerAndZoom(); var arrPois = []; if (data && data.code === 0) { const socitem = data.data if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; this.center = {lng: clng, lat: clat}; var myIcon = new BMap.Icon( require("../../../assets/img/markers.png"), new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), // 指定定位位置 imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 }); for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; var point = new BMap.Point(p0, p1); arrPois.push(point); //距离差距 var distance = this.getDistance(clat,clng, p1,p0); var content = "<table style='color: #FFF;'>"; content = content + "<tr><td> 电池编号："+socitem[i].thingId+"</td></tr>"; content = content + "<tr><td> 经纬度："+socitem[i].longitudedirectionValue+socitem[i].longitude+"，"+socitem[i].latitudedirectionValue+socitem[i].latitude+"</td></tr>"; content = content + "<tr><td> 与最新点距离："+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间："+socitem[i].uploadTime+"</td></tr>"; content += "</table>"; //调用创建marker标记的方法， var marker = this.createMarker( point, content, socitem[i].thingId, i, myIcon ); map.addOverlay(marker) // 将标注添加到地图中 var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 8, strokeOpacity: 2, Color: 'Blue', fillColor: '#f03' }) map.addOverlay(circle) } } else { console.log('没有数据的显示') this.soctitle = '暂无数据显示' } } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } //绘制箭头及其样式 var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.3,//图标缩放大小 strokeColor:'#fff',//设置矢量图标的线填充颜色 strokeWeight: 1//设置线宽 }); var icons = new BMap.IconSequence(sy, '100%', '5%',false);//设置为true，可以对轨迹进行编辑 //画轨迹 var polyLine = new BMap.Polyline(arrPois, { strokeWeight: 2, //宽度 strokeOpacity: 0.5, //透明度,取值范围0 - 1 strokeColor:"#303133",//设置颜色 #4C7FED #303133 #18a45b enableEditing: false,//是否启用线编辑，默认为false enableClicking: false,//是否响应点击事件，默认为true icons:[icons] }); map.addOverlay(polyLine); //画轨迹结束 BMapLib.LuShu.prototype._move = function(initPos, targetPos, effect) { var pointsArr = [initPos, targetPos]; //点数组 var me = this, //当前的帧数 currentCount = 0, //步长，米/秒 timer = 10, step = this._opts.speed / (1000 / timer), //初始坐标 init_pos = this._projection.lngLatToPoint(initPos), //获取结束点的(x,y)坐标 target_pos = this._projection.lngLatToPoint(targetPos), //总的步长 count = Math.round(me._getDistance(init_pos, target_pos) / step); //显示折线 //如果想显示小车走过的痕迹，放开这段代码就行 this._map.addOverlay( new BMap.Polyline(pointsArr, { strokeColor: "#111", strokeWeight: 3, strokeOpacity: 0.5 }) ); // 画线 //如果小于1直接移动到下一点 if (count < 1) { me._moveNext(++me.i); return; } me._intervalFlag = setInterval(function() { //两点之间当前帧数大于总帧数的时候，则说明已经完成移动 if (currentCount >= count) { clearInterval(me._intervalFlag); //移动的点已经超过总的长度 if (me.i > me._path.length) { return; } //运行下一个点 me._moveNext(++me.i); } else { currentCount++; var x = effect(init_pos.x, target_pos.x, currentCount, count), y = effect(init_pos.y, target_pos.y, currentCount, count), pos = me._projection.pointToLngLat(new BMap.Pixel(x, y)); //设置marker if (currentCount == 1) { var proPos = null; if (me.i - 1 >= 0) { proPos = me._path[me.i - 1]; } if (me._opts.enableRotation == true) { me.setRotation(proPos, initPos, targetPos); } if (me._opts.autoView) { if (!me._map.getBounds().containsPoint(pos)) { me._map.setCenter(pos); } } } //正在移动 me._marker.setPosition(pos); //设置自定义overlay的位置 me._setInfoWin(pos); } }, timer); }; //添加缩略图控件 map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); //添加缩放平移控件 map.addControl(new BMap.NavigationControl()); //添加比例尺控件 map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); //添加地图类型控件 // map.addControl(new BMap.MapTypeControl()); // 普通街道视图：BMAP_NORMAL_MAP // 三维视图：BMAP_PERSPECTIVE_MAP // 卫星视图：BMAP_SATELLITE_MAP // 卫星和路网的混合视图：BMAP_HYBRID_MAP map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT})); //负责切换地图类型的控件 this.initLushu(map, arrPois, this.batteryId); }) }) }, // 测量百度地图两个点间的距离 /* * Lat1 Lung1 表示A点经纬度，Lat2 Lung2 表示B点经纬度； a=Lat1 – Lat2 为两点纬度之差 b=Lung1 * -Lung2 为两点经度之差； * 6378.137为地球半径，单位为公里； * 最新平均半径 大约3959英里(6371.393千米) 。这个数字是地心到地球表面所有各点距离的平均值。 可以这样求：平均半径=(赤道半径×2+极半径)/3 地球半径有时被使用作为距离单位, 特别是在天文学和地质学中常用。它通常用RE表示。 地球大概半径6370.856千米。 * 计算出来的结果单位为公里。 * 经过经纬度获取距离(单位：公里) * @param lat1 * @param lng1 * @param lat2 * @param lng2 * @return */ getDistance(lat1,lng1,lat2,lng2) { let EARTH_RADIUS = 6378.137; let radLat1 = this.rad(lat1); let radLat2 = this.rad(lat2); let a = radLat1 - radLat2; let b = this.rad(lng1) - this.rad(lng2); let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); s = s * EARTH_RADIUS; s = Math.round(s * 10000) / 10000; s = s*1000; //乘以1000是换算成米 return s; }, rad(d){ return d * Math.PI / 180.0; }, initLushu(map, arrPois, batteryId) { this.lushu = new BMapLib.LuShu(map, arrPois, { defaultContent: batteryId, // autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整 icon: new BMap.Icon( require("../../../assets/img/mybike2.png"), new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), speed: this.speed, enableRotation: true, //是否设置marker随着道路的走向进行旋转 landmarkPois: [ { lng:114.52785300795644, lat:38.14758574827796, html: "加油站", pauseTime: 2 } ] }); }, play(val) { // 动图播放 if (this.arrIndex >= this.gpsArr.length - 3) { this.arrIndex = 0; } switch (val) { case 1: this.lushu.start(); break; case 2: this.lushu.pause(); break; case 3: this.lushu.stop(); this.arrIndex = 0; this.percentage = 0; break; } }, //创建maeker和infowindow //传入的参数为：坐标，弹框中要显示的信息，厂区号 createMarker(point, iw, paramNumber,i,myIcon) { var markerx = new BMap.Marker(point); //序号为1.2.3.4.....，根据需求更改 var label = new BMap.Label(i+1, { offset:new BMap.Size(-3,-5)}); label.setStyle({ background:'url()', color:'#fff', border:'none', fontSize:'12px', textAlign:'center', width:'25px', height:'25px', lineHeight:'25px' }); markerx.setLabel(label) //将序号放入标记中 markerx.setZIndex(9999) //在路线之上 覆盖路线 var opts = { width: 300, // 信息窗口宽度 height: 180, // 信息窗口高度 title: '<h4>坐标信息'+'</h4>', // 信息窗口标题 enableMessage: true, //设置允许信息窗发送短息 message: "" } //鼠标停留发生的事件 markerx.addEventListener("mouseover", function(e) { this.openInfoWindow(new BMap.InfoWindow(iw,opts)); }); //鼠标划出发生的事件 markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); //点击标记发生的事件，暂不做特殊处理 var that = this; markerx.addEventListener("click", function(e) { }); return markerx; } }} </script> <style > /* 弹出框中标题样式 */ .title { color: darkgreen; text-align: center; height: 0.125rem; } /* 弹出框中提示“无数据”的样式 */ .nodate { color: dimgrey; text-align: center; } /* 弹出框底部的点击提示样式 */ .reminder { font-size: 0.15rem; color: darkcyan; margin-left: 1.25rem; } .btn { width: 1.125rem; height: 0.375rem; float: left; background-color: #fff; color: rgba(27, 142, 236, 1); font-size: 0.175rem; border:0.0125rem solid rgba(27, 142, 236, 1); border-radius: 0.0625rem; margin: 0 0.0625rem; text-align: center; line-height: 0.375rem; } .btn:hover { background-color: rgba(27, 142, 236, 0.8); color: #fff; } .drawing-panel { z-index: 999; position: fixed; bottom: 1.3rem; margin-left: 0.3rem; padding: 0.12rem 0.12rem; border-radius: .05rem; background-color: #fff; box-shadow: 0 0.025rem 0.075rem 0 rgba(27, 142, 236, 0.5); } /* 以下为坐标 弹框信息的样式 */ /*地图标题*/ /* 去除百度地图版权那行字 和 百度logo */ .BMap_bubble_title { color: white; font-size: 0.1625rem; font-weight: bold; text-align: left; padding-left: 0.0625rem; padding-top: 0.0625rem; border-bottom: 0.0125rem solid gray; background-color: #409EFF; } /* 消息内容 */ .BMap_bubble_content { background-color: rgba(40, 40, 40, 0.8); padding-left: 0.0625rem; padding-top: 0.0625rem; padding-bottom: 0.125rem; border-bottom-left-radius: 0.1rem; border-bottom-right-radius: 0.1rem; } /* 内容 */ .BMap_pop div:nth-child(9) { top: 0.4375rem !important; border-radius: 0.0625rem; } .BMap_pop div:nth-child(5) { display: none; } /* 左上角删除按键 */ .BMap_pop img { display: none; } .BMap_top { display: none; } .BMap_bottom { display: none; } .BMap_center { display: none; } /* 隐藏边角 */ .BMap_pop div:nth-child(1) div { display: none; } .BMap_pop div:nth-child(3) { display: none; } .BMap_pop div:nth-child(7) { display: none; } </style>在顶部添加两个时间范围筛选作为入参，并且去掉点位图标，鼠标靠近就显示对应点位卡片信息
08-21
var point = new BMap.Point(p0, p1); arrPois.push(point); // 计算距离 var distance = this.getDistance(clat,clng, p1,p0); var content = ";'>"; content = content + "<tr><td> 电池编号："+socitem...
<template> <div> <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" style="height:9.45rem;width: 100%;" @click="getClickInfo" :scroll-wheel-zoom='true'> <div class="drawing-panel" style="z-index: 99;"> <button class = "btn" @click='play(1)' size="small">播放</button> <button class = "btn" @click='play(2)' size="small">暂停</button> <button class = "btn" @click='play(3)' size="small">停止</button> </div> </baidu-map> </div> </template> <script> export default { name: 'BtAddrBaiDu', data () { return { startTime: null, endTime: null, center: {lng: 114.085947, lat: 22.547}, zoom: 15, point:"", gpsArr:[ { lng:114.000069, lat:22.500069 }, ], speed:500, lushu:{}, batteryId:"电池编号:"+this.$parent.$children[0].hwid, myMap: {} } }, mounted(){ this.handler() }, methods: { filterByTime(){ this.handler() }, handler({BMap, map}){ this.$nextTick(()=>{ this.$http({ url: this.$http.adornUrl('/mqtt/mtgpslocationinfo/queryGpsLocationInfos'), method: 'get', params: this.$http.adornParams({ 'limit': 50, 'thingid': this.$parent.$children[0].hwid }) }).then(({data}) => { map.enableScrollWheelZoom(new BMap.Point(114.085947, 22.547), 15); map.centerAndZoom(); var arrPois = []; if (data && data.code === 0) { const socitem = data.data if (socitem && socitem.length > 0) { let clng = socitem[socitem.length-1].longitude; let clat = socitem[socitem.length-1].latitude; this.center = {lng: clng, lat: clat}; var myIcon = new BMap.Icon( require("../../../assets/img/markers.png"), new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - 11 * 25) }); for (let i = 0; i < socitem.length; i++) { var p0 = socitem[i].longitude; var p1 = socitem[i].latitude; var point = new BMap.Point(p0, p1); //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].thingId+"</td></tr>"; content = content + "<tr><td> 经纬度："+socitem[i].longitudedirectionValue+socitem[i].longitude+"，"+socitem[i].latitudedirectionValue+socitem[i].latitude+"</td></tr>"; content = content + "<tr><td> 与最新点距离："+distance.toFixed(2)+"m</td></tr>"; content = content + "<tr><td> 时间："+socitem[i].uploadTime+"</td></tr>"; content += "</table>"; var marker = this.createMarker( point, content, socitem[i].thingId, i, myIcon ); map.addOverlay(marker) var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 8, strokeOpacity: 2, Color: 'Blue', fillColor: '#f03' }) map.addOverlay(circle) } } else { console.log('没有数据的显示') this.soctitle = '暂无数据显示' } } else { console.log('没有数据的显示') this.noneTitle = '没有数据~' } var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.3, strokeColor:'#fff', strokeWeight: 1 }); var icons = new BMap.IconSequence(sy, '100%', '5%',false); var polyLine = new BMap.Polyline(arrPois, { strokeWeight: 2, strokeOpacity: 0.5, strokeColor:"#303133", enableEditing: false, enableClicking: false, icons:[icons] }); map.addOverlay(polyLine); BMapLib.LuShu.prototype._move = function(initPos, targetPos, effect) { var pointsArr = [initPos, targetPos]; var me = this, currentCount = 0, timer = 10, step = this._opts.speed / (1000 / timer), init_pos = this._projection.lngLatToPoint(initPos), target_pos = this._projection.lngLatToPoint(targetPos), count = Math.round(me._getDistance(init_pos, target_pos) / step); this._map.addOverlay( new BMap.Polyline(pointsArr, { strokeColor: "#111", strokeWeight: 3, strokeOpacity: 0.5 }) ); if (count < 1) { me._moveNext(++me.i); return; } me._intervalFlag = setInterval(function() { if (currentCount >= count) { clearInterval(me._intervalFlag); if (me.i > me._path.length) { return; } me._moveNext(++me.i); } else { currentCount++; var x = effect(init_pos.x, target_pos.x, currentCount, count), y = effect(init_pos.y, target_pos.y, currentCount, count), pos = me._projection.pointToLngLat(new BMap.Pixel(x, y)); if (currentCount == 1) { var proPos = null; if (me.i - 1 >= 0) { proPos = me._path[me.i - 1]; } if (me._opts.enableRotation == true) { me.setRotation(proPos, initPos, targetPos); } if (me._opts.autoView) { if (!me._map.getBounds().containsPoint(pos)) { me._map.setCenter(pos); } } } me._marker.setPosition(pos); me._setInfoWin(pos); } }, timer); }; map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})); map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT})); this.initLushu(map, arrPois, this.batteryId); }) }) }, getDistance(lat1,lng1,lat2,lng2) { let EARTH_RADIUS = 6378.137; let radLat1 = this.rad(lat1); let radLat2 = this.rad(lat2); let a = radLat1 - radLat2; let b = this.rad(lng1) - this.rad(lng2); let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); s = s * EARTH_RADIUS; s = Math.round(s * 10000) / 10000; s = s*1000; return s; }, rad(d){ return d * Math.PI / 180.0; }, initLushu(map, arrPois, batteryId) { this.lushu = new BMapLib.LuShu(map, arrPois, { defaultContent: batteryId, autoView: true, icon: new BMap.Icon( require("../../../assets/img/mybike2.png"), new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), speed: this.speed, enableRotation: true, 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; } }, createMarker(point, iw, paramNumber,i,myIcon) { var markerx = new BMap.Marker(point); var label = new BMap.Label(i+1, { offset:new BMap.Size(-3,-5)}); label.setStyle({ background:'url()', color:'#fff', border:'none', fontSize:'12px', textAlign:'center', width:'25px', height:'25px', lineHeight:'25px' }); markerx.setLabel(label) markerx.setZIndex(9999) var opts = { width: 300, height: 180, title: '<h4>坐标信息'+'</h4>', enableMessage: true, message: "" } markerx.addEventListener("mouseover", function(e) { this.openInfoWindow(new BMap.InfoWindow(iw,opts)); }); markerx.addEventListener("mouseout", function(e) { this.closeInfoWindow(new BMap.InfoWindow(iw)); }); var that = this; markerx.addEventListener("click", function(e) { }); return markerx; } }} </script> <style > .title { color: darkgreen; text-align: center; height: 0.125rem; } .nodate { color: dimgrey; text-align: center; } .reminder { font-size: 0.15rem; color: darkcyan; margin-left: 1.25rem; } .btn { width: 1.125rem; height: 0.375rem; float: left; background-color: #fff; color: rgba(27, 142, 236, 1); font-size: 0.175rem; border:0.0125rem solid rgba(27, 142, 236, 1); border-radius: 0.0625rem; margin: 0 0.0625rem; text-align: center; line-height: 0.375rem; } .btn:hover { background-color: rgba(27, 142, 236, 0.8); color: #fff; } .drawing-panel { z-index: 999; position: fixed; bottom: 1.3rem; margin-left: 0.3rem; padding: 0.12rem 0.12rem; border-radius: .05rem; background-color: #fff; box-shadow: 0 0.025rem 0.075rem 0 rgba(27, 142, 236, 0.5); } .BMap_bubble_title { color: white; font-size: 0.1625rem; font-weight: bold; text-align: left; padding-left: 0.0625rem; padding-top: 0.0625rem; border-bottom: 0.0125rem solid gray; background-color: #409EFF; } .BMap_bubble_content { background-color: rgba(40, 40, 40, 0.8); padding-left: 0.0625rem; padding-top: 0.0625rem; padding-bottom: 0.125rem; border-bottom-left-radius: 0.1rem; border-bottom-right-radius: 0.1rem; } .BMap_pop div:nth-child(9) { top: 0.4375rem !important; border-radius: 0.0625rem; } .BMap_pop div:nth-child(5) { display: none; } .BMap_pop img { display: none; } .BMap_top { display: none; } .BMap_bottom { display: none; } .BMap_center { display: none; } .BMap_pop div:nth-child(1) div { display: none; } .BMap_pop div:nth-child(3) { display: none; } .BMap_pop div:nth-child(7) { display: none; } </style>给页面加上时间选择器
最新发布
08-22
然后，在filterByTime方法中，可能已经调用了handler来刷新数据，但需要确认是否正确传递时间参数到后端接口。 然后，检查现有的handler方法，它接收BMap和map参数。在发送HTTP请求时，params里需要包含startTime和...
Bmap地图自定义图片撒点的图标和聚合的图标以及添加点位的方法（分多种类别撒点，比如大哥大的小弟。大姐头的小弟，聚合和撒点颜色都不一样）
Blue54的博客
03-31 1096
【代码】Bmap地图自定义图片撒点的图标和聚合的图标以及添加点位的方法（分多种类别撒点，比如大哥大的小弟。大姐头的小弟，聚合和撒点颜色都不一样）
百度地图3.0离线js api模板（demo）+ 地图瓦片下载器
07-17
百度地图3.0离线js api模板（demo）+ 地图瓦片下载器； 解压后使用 demo.html 来查看demo ； 地图资源文件存存放位置为 tiles 文件夹； 使用压缩包里面的 【全能电子地图下载器】 进行地图瓦片下载，下载完之后放到 tiles 文件夹下面即可。 本人亲自修改并测试，各项功能全部OK！
百度地图使用笔记
we
06-08 2649
百度地图使用笔记（自定义覆盖物、获取两点之间距离、添加 图形，点，线，面 文字、删除指定覆盖物、marker 自定义icon、加载海量点、两点之间 画弧线 圆弧、画行政区、信息弹窗、鼠标测距、带箭头的line）......
BMap百度地图坐标转换（批量坐标）
天马波波的专栏
10-23 4904
http://api.map.baidu.com/api?v=1.3" type="text/javascript">  http://dev.baidu.com/wiki/static/map/API/examples/script/changeMore.js">>   1.批量坐标 var varpoints = [   newBMap.Point(116.3786889372559
百度地图API 自定义标注图标
热门推荐
itmyhome的专栏
12-10 2万+
通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置， 也可以使用marker.setIcon()方法。 "text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.P
百度地图中绘制多个点例子
ime33的博客
04-21 5805
水平有限，欢迎指正、交流！！ 百度地图中绘制多个点 *{padding: 0;margin: 0;font-family: "微软雅黑"} h3{width: 100%;height: 45px;line-height: 45px;background: #eee;color: #0
vue2中如何使用百度地图（BMap）以及显示坐标和相关信息：
Chen__FY的博客
08-04 4080
初始化地图，以及给地标设置值，我这里的经纬度是在大庆市，你们可以根据自身需求去选择，具体地标的经纬度可以看。1.首先需求是要实现类似于这样的：点击数据和地图两个按钮然后切换到不同页面。在给标注的位置设置图标的时候，vue的项目必须用。（3） 地图的实现：不懂的可以看注释。来获取，我这里的图标是在阿里巴巴（首先我们得在百度地图官网（
百度地图api的使用记录
darer49的博客
07-12 571
1.基础使用 // 调用百度地图 var map = new BMapGL.Map('container'); map.centerAndZoom(new BMapGL.Point(117.380637, 22.925178), 8); map.enableScrollWheelZoom(true); map.setMapStyleV2({styleId: '7a00e20978f2abd5e4b1cbace7b8d5c1'}); //从json中获取点画图常用方法 $.get
百度地图JavaScript API 学习之创建标注
monkeyfly学前端
04-11 6155
在地图上绘制之创建标注 官方demo示例和讲解——直戳这里 简介 所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。 覆盖物拥有自己的地理坐标，当拖动或缩放地图时，它们会相应的移动。 覆盖物主要分为：标注（点标注、矢量图形（包括折线、多边形、圆））、信息窗口、图层。 说明：本节重点介绍一下如何向地图添加标注 百度地图提供的覆盖物 覆盖物 类名 说明 ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值