不要模拟数据,参考原旧百度地图获取数据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千米) 。这个数字是地心到地球表面所有各点距离的平均值。
可以这样求:平均半径=(赤道半径×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