百度地圖滑鼠滑過marker時開啟自定義資訊視窗
阿新 • • 發佈:2019-01-01
在百度地圖上實現滑鼠滑過marker時開啟自定義的資訊視窗,當滑鼠滑出marker時關閉已開啟的資訊視窗。
首先,需要在地圖上新增一個marker,具體如下所示:
新增marker以後,就可以實現滑鼠滑過marker時開啟自定義資訊視窗的事件了。$.ajax({ async:false, cache:true, url: "獲取位置資訊的介面", type: 'GET', success: function(result){ if(result != undefined && result.length >0){ map.centerAndZoom(new BMap.Point(result[0].longitude, result[0].latitude)); var longitude = [], latitude = []; for (var i = 0; i < result.length; i++) { longitude[i] = result[i].longitude; latitude[i] = result[i].latitude; var steelMarker = new BMap.Marker(new BMap.Point(longitude[i],latitude[i]), {title:"鋼材"}, {icon:new BMap.Icon("myCar.png", new BMap.Size(25, 20))}); map.addOverlay(steelMarker); //將標註新增到地圖中 } } }, error:function(e){ //alert("獲取資訊失敗"); } });
百度地圖的marker有一個addEventListener()事件,具體為:addEventListener(event: String, handler: Function),即給marker新增事件監聽函式。marker新增的監聽事件包括:
事件 | 引數 | 描述 |
click | event{type, target} | 點選標註圖示後會觸發此事件 |
dblclick | event{type, target, point,pixel} | 雙擊標註圖示後會觸發此事件 |
mousedown | event{type, target, point,pixel} | 滑鼠在標註圖上按下觸發此事件 |
mouseup | event{type, target, point,pixel} | 滑鼠在標註圖上釋放觸發此事件 |
mouseout | event{type, target, point,pixel} | 滑鼠離開標註時觸發此事件 |
mouseover | event{type, target, point,pixel} | 當滑鼠進入標註圖示區域時會觸發此事件 |
remove | event{type, target} | 移除標註時觸發 |
infowindowclose | event{type, target} | 資訊窗在此標註上關閉時觸發此事件 |
infowindowopen | event{type, target} | 資訊窗在此標註上開啟時觸發此事件 |
dragstart | event{type, target} | 開始拖拽標註時觸發此事件 |
dragging | event{type, target, pixel, point} | 拖拽標註過程中觸發此事件 |
dragend | event{type, target, pixel, point} | 拖拽結束時觸發此事件 |
rightclick | event{type, target} | 右鍵點選標註時觸發此事件 |
將addEventListener(event: String, handler: Function)中的event寫為“mouseover”,即可為marker新增一個滑鼠滑過事件;然後使handler實現開啟自定義視窗資訊的功能,具體是利用marker的openInfoWindow()方法,即openInfoWindow(infoWnd: InfoWindow)。在呼叫openInfoWindow()方法之前,應首先定義一個百度地圖的資訊視窗即InfoWindow,建立資訊視窗的函式為:InfoWindow(content: String | HTMLElement, opts: InfoWindowOptions),其中,content即為所建立資訊視窗的內容;而opts是此資訊視窗的可選引數,這些引數包括:width、height、maxWidth、offset、title、enableAutoPan、enableCloseOnClick、enableMessage、message等。
① 建立百度地圖資訊視窗:
var steelContent = '<div><p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em"><br/>經度:'+longitude[i]+'<br/>緯度:'+latitude[i]+
'<br/><a style="float:right;margin:10px" href="/ILTS/orderDetail/orderDetail.html?id='+goodsId+'&goodsStatus='+goodsStatus+'">物資詳情</a></p></div>';
var steelOpts = {
width : 260, //資訊視窗寬度
height: 200, //資訊視窗高度
title : "<b>車輛資訊</b>" , //資訊視窗標題
enableMessage:true //設定允許資訊窗傳送短息
};
new BMap.InfoWindow(steelContent, steelOpts);
② 利用openInfoWindow開啟建立好的資訊視窗:
steelMarker.openInfoWindow(new BMap.InfoWindow(steelContent, steelOpts));
③ 通過addEventListener將上面的開啟資訊視窗新增為steelMarker的滑鼠滑過事件mouseover即可:
steelMarker.addEventListener("mouseover",function () {
this.openInfoWindow(new BMap.InfoWindow(steelContent, steelOpts));
}
);
④利用closeInfoWindow關閉資訊視窗:
steelMarker.closeInfoWindow();
⑤ 通過addEventListener將上面的關閉資訊視窗新增為steelMarker的滑鼠移開事件mouseout即可:
steelMarker.addEventListener("mouseout",function () {
this.closeInfoWindow();
}
);
這樣就實現了滑鼠滑過時開啟自定義資訊視窗,滑鼠移開時關閉自定義資訊視窗的功能。總結如下:
$.ajax({
async:false,
cache:true,
url: "獲取位置資訊的介面",
type: 'GET',
success: function(result){
if(result != undefined && result.length >0){
map.centerAndZoom(new BMap.Point(result[0].longitude, result[0].latitude));
var longitude = [], latitude = [];
for (var i = 0; i < result.length; i++) {
longitude[i] = result[i].longitude;
latitude[i] = result[i].latitude;
var steelMarker = new BMap.Marker(new BMap.Point(longitude[i],latitude[i]), {title:"鋼材"}, {icon:new BMap.Icon("myCar.png", new BMap.Size(25, 20))});//
var steelContent = '<div><p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em"><br/>經度:'+longitude[i]+'<br/>緯度:'+latitude[i]+
'<br/><a style="float:right;margin:10px" href="/ILTS/orderDetail/orderDetail.html?id='+goodsId+'&goodsStatus='+goodsStatus+'">物資詳情</a></p></div>';
var steelOpts = {
width : 260, //資訊視窗寬度
height: 200, //資訊視窗高度
title : "<b>車輛資訊</b>" , //資訊視窗標題
enableMessage:true //設定允許資訊窗傳送短息
};
map.addOverlay(steelMarker); //將標註新增到地圖中
//新增滑鼠滑過時開啟自定義資訊視窗事件
steelMarker.addEventListener("mouseover",function () {
this.openInfoWindow(new BMap.InfoWindow(steelContent, steelOpts));
}
);
//新增滑鼠離開時關閉自定義資訊視窗事件
steelMarker.addEventListener("mouseout",function () {
this.closeInfoWindow();
}
);
}
}
},
error:function(e){
//alert("獲取資訊失敗");
}
});