<template>
<div id="canteen">
</div>
</template>
<script src="http://api.map.baidu.com/api?v=2.0&ak=Qoad9PTNdGqKgKmh0qmfKWgH4Y3e6K4L"></script>
<script>
import carmore from '../../services/statistics'
import Cache from 'app/cache/cache.js';
export default {
data() {
return {
};
},
created() {
// this.getDate()
},
methods: {
getData(fn) {
let vin = Cache.getVin();
carmore.getcarmore({
vin: vin,
type: 'vehicle',
}).then((res) => {
if (res.errno == 0) {
console.log(res,'res')
let data = res.data;
this.latFirst = data.info.location.lat;
this.lngFirst = data.info.location.lng;
console.log( this.latFirst,'firstlat')
console.log( this.lngFirst,'firstlnt')
if (typeof fn == 'function') {
fn();
};
}
});
},
translateCallback(data) {
// console.log(data,'data')
// alert('data')
console.log(data,'绘制')
if (data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
console.log(data.points[0],'参数')
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300, 157));
//起始点转换 未转换数据
var driving = new BMap.DrivingRoute(this.bmap, { renderOptions: { map: this.bmap, autoViewport: true } });
driving.search(data.points[0], data.points[1]);
//将终点zuo
driving.setMarkersSetCallback(function(result) {
result[1].marker.setIcon(myIcon)
})
// console.log(marker,'markert')
// this.bmap.addOverlay(marker);
// this.bmap.panTo(data.points[0]);
// var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});
// marker.setLabel(label); //添加百度label
// this.bmap.setCenter(data.points[0]);
}
},
getRes(fn) {
let vin = Cache.getVin();
carmore.getcarmore({
vin: vin,
type: 'vehicle',
}).then((res) => {
if (res.errno == 0) {
console.log(res,'res')
let data = res.data;
this.latSecond = data.info.location.lat;
this.lngSecond = data.info.location.lng;
console.log( this.latSecond,'secondlat')
console.log( this.lngSecond,'secondlnt')
//-------
// setTimeout(()=> {
console.log(this.latFirst,'拿到first')
pointArr = []
var p1 = new BMap.Point(this.lngFirst,this.latFirst);
var p2 = new BMap.Point(this.lngSecond,this.latSecond);
// var p1 = new BMap.Point(116.322951, 39.983465);
// var p2 = new BMap.Point(116.32297, 39.983474);
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(p1);
pointArr.push(p2);
console.log(pointArr, 'this')
convertor.translate(pointArr, 1, 5, this.translateCallback)
console.log('zhixing')
//-----------
// },1000)
}
});
},
theLocation() {
// if(this.lat != "" && this.lnt != ""){
this.bmap.clearOverlays();
var newPoint = new BMap.Point(116.33,39.73);
this.newPoint = newPoint
var marker = new BMap.Marker(this.newPoint); // 创建标注
this.bmap.addOverlay(marker); // 将标注添加到地图中
// this.bmap.panTo(this.newPoint);
// }
//-----
// var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
// //起始点转换 未转换数据
// var p1 = new BMap.Point(116.301934, 39.977552);
// var p2 = new BMap.Point(116.508328, 39.919141);
// var driving = new BMap.DrivingRoute(this.bmap, { renderOptions: { map: this.bmap, autoViewport: true }});
// driving.search(p1, p2);
// //将终点zuo
// driving.setMarkersSetCallback(function(result){
// result[1].marker.setIcon(myIcon)
// })
//----
},
// 坐标转换完之后的回调函数
},
mounted() {
this.$nextTick(function() {
var that = this
console.log(this, 'this是什么')
this.getData(function() {
setInterval(function() {
that.getRes();
}, 10000);
});
var map = new BMap.Map("canteen"); // 创建地图实例；（"container"）就是刚才新建的div的id属性值
// var point = new BMap.Point(116.404, 39.915); // 创建点坐标；这个点是由经度和纬度构成的，点可以随意选取
// map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
// map.setDefaultCursor("url('bird.cur')");
// console.log(map,'map')
//
this.bmap = map;
this.bmap.addControl(new BMap.NavigationControl());
this.theLocation();
//------
// var x = 116.32715863448607;
// var y = 39.990912172420714;
// var ggPoint = new BMap.Point(x,y);
// this.ggPoint =ggPoint;
// that = this
// function translateCallback (data){
// // console.log(data,'data')
// // alert('data')
// if(data.status === 0) {
// var marker = new BMap.Marker(data.points[0]);
// console.log(marker,'markert')
// that.bmap.addOverlay(marker);
// that.bmap.panTo(data.points[0]);
// var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});
// marker.setLabel(label); //添加百度label
// that.bmap.setCenter(data.points[0]);
// }
// }
// let that = this;
// 转换器将gps坐标转换
// setTimeout(function() {
// var p1 = new BMap.Point(this.latFirst, this.lngFirst);
// var p2 = new BMap.Point( this.latSecond, this.lngSecond);
// var convertor = new BMap.Convertor();
// var pointArr = [];
// pointArr.push(that.p1);
// pointArr.push(that.p2);
// console.log(pointArr, 'this')
// convertor.translate(pointArr, 1, 5, that.translateCallback)
// console.log('zhixing')
// }, 1000);
//=====
// var opts = {
// width: 250, // 信息窗口宽度
// height: 80, // 信息窗口高度
// title: "信息窗口", // 信息窗口标题
// enableAutoPan: false,
// enableCloseOnClick: false,
// enableMessage: true //设置允许信息窗发送短息
// };
// var sContent =
// "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" +
// "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
// "</div>";
// // var point1= new BMap.Point(this.lngFirst,this.latFirst);
// var infoWindow = new BMap.InfoWindow(sContent, opts); // 创建信息窗口对象
// this.bmap.openInfoWindow(infoWindow, data.points[1]);
});
}
}
</script>
<style scoped>
canteen {
position: relative;
width: 99.5%;
height: 6.6rem;
margin-top: 0.3rem;
box-shadow: 0 0 8px #FBD157;
border-radius: 10px;
}
.BMap_Marker {
display: none !important
}
</style>
