百度地图鼠标滑过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以后，就可以实现鼠标滑过marker时打开自定义信息窗口的事件了。

百度地图的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("获取信息失败");}
});

百度地图鼠标滑过marker时打开自定义信息窗口相关推荐

js百度地图鼠标移上覆盖物时省市区高亮，移走时恢复
鼠标移入事件 mouseoverMark (area) {//加了定时器是防止频繁触发移入事件clearTimeout(this.c);this.c = setTimeout(() => {// ...
百度地图自定义信息窗口样式
在项目中,UI经常会把信息窗口做自定义设计,那么如何实现自定义样式的信息窗口呢.核心代码如下: /** 创建信息窗口* */function _createMapvInfoWindow(width,h ...
百度地图鼠标经过图层时高亮显示图标及标签内容
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
js百度地图鼠标绘制工具条库
本篇文章是介绍百度地图鼠标绘制工具条库基本使用百度地图的覆盖物的编辑类参考:[鼠标绘制工具条库](http://api.map.baidu.com/library/DrawingManager/1. ...
百度地图添加多个marker点位标注
百度地图添加多个marker点位标注新建一个TMap.js文件 export function TMap(key) {return new Promise(function (resolve, re ...
百度地图api html信息窗口,百度地图 javascript api自定义信息窗口
百度 js api中存在infoWindow的类,就是marker 点击后显示的信息窗口, 他存在一下问题 1.在map中只能显示一个infowindow, 2.该信息窗口的样式无法修改,显示的内容具 ...
使用百度地图Web服务API查询地点的经纬度信息
使用百度地图Web服务API查询地点的经纬度信息 API地理编码服务数据结果 API地理编码服务地理编码服务(又名Geocoder)是一类Web API接口服务: 地理编码服务提供将结构化地址数 ...
百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

百度地图鼠标滑过marker时打开自定义信息窗口

百度地图鼠标滑过marker时打开自定义信息窗口相关推荐

最新文章

热门文章