<template>
<!-- <div>
<div class="noData" v-show="lineList.length==0">
{{$t('system.content_noData')}}
</div>
</div> -->
<div style="width:100%;height:90%;border:1px solid gray" id="container"></div>
</template>
<script>
import BMap from 'BMap'
export default {
data(){
return {
time:'',
lineList:[],
Point:[],
PositionList:[],
}
},
methods:{
getlineList(){ // 获取数据
this.apipost('app_get_visit_line',{visitDate:this.time},res=>{
if(res.data.resultCode==1){
//console.log(res.data.data)
this.lineList = res.data.data;
if(this.lineList){
this.Point = this.lineList.visitPoint
this.Point.forEach(x=>{
x.xy = x.point.split(',')
})
this.creatMap()
}else{
let div = document.createElement("div")
div.style.width='100%';
div.style.height='90%';
div.style.border='none';
div.style.overflow='hidden';
div.style.position='relative';
div.style.zIndex='0';
div.style.backgroundColor='rgb(243, 241, 236)';
div.style.color='rgb(0, 0, 0)';
div.style.textAlign='center';
let parent = document.getElementsByClassName('flexParent');
// parent.appendChild(div)
// console.log(div)
var map = new BMap.Map("container"); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.073652,30.664369), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
this.displatDOM()
}
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
creatMap(){
var _this = this;
var map = new BMap.Map('container');
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point,name,head,timeS){
this._point = point;
this._name = name;
this._head = head;
this._time = timeS;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "";
// div.style.border = "1px solid #BC3B3A";
div.style.color = "#333333";
div.style.height = "auto";
div.style.padding = "5px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontFamily = "PingFangSC-fine"
div.style.color="#FF6666"
div.style.fontWeight="bold"
div.style.fontSize = "12px"
var name = this._Pname = document.createElement("p");
name.style.textAlign = "center";
div.appendChild(name);
name.appendChild(document.createTextNode(this._name));
var time = this._Ptime = document.createElement("p");
time.style.textAlign = "center";
div.appendChild(time);
time.appendChild(document.createTextNode(this._time));
var headDiv = this.headDiv = document.createElement("img");
headDiv.style.backgroundColor = "#ffffff";
headDiv.style.border = "5px solid #FF6666";
headDiv.style.color = "white";
headDiv.style.height = "50px";
headDiv.style.width = "50px";
headDiv.style.borderRadius = "50%";
headDiv.style.padding = "5px";
headDiv.style.lineHeight = "18px";
headDiv.style.whiteSpace = "nowrap";
headDiv.style.MozUserSelect = "none";
headDiv.style.fontSize = "12px";
headDiv.src = this._head
div.appendChild(headDiv);
var sanjiao = document.createElement("div");
sanjiao.style.width= '0';
sanjiao.style.height= '0';
sanjiao.style.borderLeft= '3px solid transparent';
sanjiao.style.borderRight= '3px solid transparent';
sanjiao.style.borderTop= '16px solid #ff6666';
sanjiao.style.margin="0 auto";
sanjiao.style.position="relative"
sanjiao.style.top="-5px"
div.appendChild(sanjiao);
var that = this;
var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/mrep/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
var raduis = document.createElement("p");
raduis.style.width = "14px";
raduis.style.height = "6px";
raduis.style.borderRadius = "5px";
raduis.style.backgroundColor = "#B21C1C";
raduis.style.margin = "0 auto 0 auto"
div.appendChild(raduis);
map.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 20+"px";
this._div.style.top = pixel.y - 150 + "px";
}
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
map.centerAndZoom(new BMap.Point(this.Point[0].xy[0],this.Point[0].xy[1], 32.955),8);
// map.centerAndZoom(new BMap.Point(120.129721,30.314429, 32.955),6);
map.enableScrollWheelZoom();
let PositionList = [];
this.Point.forEach((x,index)=>{ // 循环数据添加坐标点
if(true){
let src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3198678185,878755003&fm=27&gp=0.jpg"
let name = "无名大侠"
let time = "火星时间"
// console.log(x.xy[0],x.xy[1])
if(x.phtoto){
src = x.phtoto
}
if(x.name){
name = x.name
}
if(x.visitTime){
time = x.visitTime
}
PositionList.push(new BMap.Point(x.xy[1],x.xy[0]))
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(x.xy[1],x.xy[0]),name,src,time);
map.addOverlay(myCompOverlay);
}
})
let leng = PositionList.length
if(leng){ // 判断数据长度 来划路径图
if(leng==1){
addMarker(PositionList);
}else if(leng==2){
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(PositionList[0], PositionList[PositionList.length-1]);
}else if(leng>2){
let newPositionList = JSON.parse(JSON.stringify(PositionList)) // 删除第一个 和最后一个 获取到中间数据 用来画途径坐标
newPositionList.pop()
newPositionList.shift()
let newDate = []
newPositionList.forEach(x=>{
newDate.push(new BMap.Point(x.lng,x.lat))
})
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(PositionList[0], PositionList[PositionList.length-1],{waypoints:newDate});
}
this.displatDOM()
}
},
displatDOM(){
let map = document.getElementById('container')
map.style.border = "none"
},
},
mounted(){
this.time = this.$route.query.time
this.getlineList()
},
}
</script>
<style scoped>
</style>