mounted(){
this.all()
},
methods:{
all(){
this.BaiduMap()
this.addMarker()
},
BaiduMap(){
/**地图初始化 */
var map = new BMap.Map("all-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(108.95,34.28), 5); // 初始化地图,设置中心点坐标和地图级别
// 添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_SATELLITE_MAP,
BMAP_HYBRID_MAP
]}));
map.addControl(new BMap.NavigationControl());
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
window.map = map;//将map变量存储在全局
},
addMarker(){
var markerArr=this.deviceArry
map.centerAndZoom(new BMap.Point(markerArr[0].longitude,markerArr[0].latitude), 8);
var point = new Array();//定义数组标注经纬信息
var marker = new Array();//定义数组点对象信息
var info = new Array();//定义悬浮提示信息
//设置icon信息
var width = 32;
var height = 32;
var imgSrc = "../../../static/images/marker.png"; //引入icon图片
var myIcon = new BMap.Icon(imgSrc, new BMap.Size(width,height));//配置icon
for(var i = 0; i < markerArr.length; i++){//遍历
point[i] = new window.BMap.Point(markerArr[i].longitude,markerArr[i].latitude);
marker[i] = new window.BMap.Marker(point[i],{icon:myIcon});//把icon和坐标添加到Marker中
map.addOverlay(marker[i]);
var label = new window.BMap.Label(markerArr[i].name);
label.setStyle({ //设置提示框的样式
color : "#000",
fontSize : "12px",
backgroundColor :"#fff",
border :"1px solid #ccc",
borderRadius:"4px",
padding :"2px 6px"
});
marker[i].setLabel(label);
info[i] = new window.BMap.InfoWindow(
"
""+"
设备："+markerArr[i].name+"
"+"
IMEI："+markerArr[i].terminalid+"
"+"
速度："+markerArr[i].speed+"
"+"
定位时间："+markerArr[i].locationdate+"
"+"
通讯时间："+markerArr[i].insertdate+"
"+"
总里程："+markerArr[i].mileage+"KM
"+"
详细地址："+markerArr[i].address+"
"+"
);//悬浮提示信息
this.addInfo(info[i],marker[i])
}
},
addInfo(info,marker){
marker.addEventListener("click", function(e){
var p = e.target
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
map.centerAndZoom(point, 14);
this.openInfoWindow(info)
})
},
}
