mounted(){

? ? this.all()

},

methods:{

? ??all(){

? ? ? ? ? ? ? ? this.BaiduMap()

? ? ? ? ? ? ? ? this.addMarker()

? ? ? ? ? ? },

? ? ? ? ? ? BaiduMap(){

? ? ? ? ? ? ? ? /**地圖初始化 */

? ? ? ? ? ? ? ? var map = new BMap.Map("all-map");? ? // 創(chuàng)建Map實例

? ? ? ? ? ? ? ? map.centerAndZoom(new BMap.Point(108.95,34.28), 5);? // 初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別

? ? ? ? ? ? ? ? // 添加地圖類型控件

? ? ? ? ? ? ? ? map.addControl(new BMap.MapTypeControl({

? ? ? ? ? ? ? ? ? ? mapTypes:[

? ? ? ? ? ? ? ? ? ? ? ? BMAP_NORMAL_MAP,

? ? ? ? ? ? ? ? ? ? ? ? BMAP_SATELLITE_MAP,

? ? ? ? ? ? ? ? ? ? ? ? BMAP_HYBRID_MAP

? ? ? ? ? ? ? ? ? ? ]}));?

? ? ? ? ? ? ? ? map.addControl(new BMap.NavigationControl());

? ? ? ? ? ? ? ? map.setCurrentCity("北京");? ? ? ? ? // 設(shè)置地圖顯示的城市 此項是必須設(shè)置的

? ? ? ? ? ? ? ? map.enableScrollWheelZoom(true);? ? //開啟鼠標(biāo)滾輪縮放

? ? ? ? ? ? ? ? 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();//定義數(shù)組標(biāo)注經(jīng)緯信息

? ? ? ? ? ? ? ? var marker = new Array();//定義數(shù)組點對象信息

? ? ? ? ? ? ? ? var info = new Array();//定義懸浮提示信息

? ? ? ? ? ? ? ? //設(shè)置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和坐標(biāo)添加到Marker中

? ? ? ? ? ? ? ? ? ? map.addOverlay(marker[i]);

? ? ? ? ? ? ? ? ? ? var label = new window.BMap.Label(markerArr[i].name);

? ? ? ? ? ? ? ? ? ? label.setStyle({ ?//設(shè)置提示框的樣式

? ? ? ? ? ? ? ? ? ? ? ? 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(

? ? ? ? ? ? ? ? ? ? ? ? "<div style='width:300px;'>"

? ? ? ? ? ? ? ? ? ? ? ? ? ? +"<p>設(shè)備："+markerArr[i].name+"</p>"

? ? ? ? ? ? ? ? ? ? ? ? ? ? +"<p>IMEI："+markerArr[i].terminalid+"</p>"

? ? ? ? ? ? ? ? ? ? ? ? ? ? +"<p>速度："+markerArr[i].speed+"</p>"

? ? ? ? ? ? ? ? ? ? ? ? ? ? +"<p>定位時間："+markerArr[i].locationdate+"</p>"

? ? ? ? ? ? ? ? ? ? ? ? ? ? +"<p>通訊時間："+markerArr[i].insertdate+"</p>"

? ? ? ? ? ? ? ? ? ? ? ? ? ? +"<p>總里程："+markerArr[i].mileage+"KM</p>"

? ? ? ? ? ? ? ? ? ? ? ? ? ? +"<p>詳細(xì)地址："+markerArr[i].address+"</p>"

? ? ? ? ? ? ? ? ? ? ? ? +"</div>"

? ? ? ? ? ? ? ? ? ? );//懸浮提示信息

? ? ? ? ? ? ? ? ? ? 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)

? ? ? ? ? ? ? ? })

? ? ? ? ? ? },

}