OpenLayers下使用Jquery tooltip(Qtip)让要素信息自动显示或隐藏

[size=medium]首先在官网下载qtip插件:[url]http://craigsworks.com/projects/qtip/[/url][/size]
[size=medium]1、导入插件[/size]
 <link rel="stylesheet" href="jquery.qtip.min.css" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="jquery.qtip.min.js" type="text/javascript"></script>

[size=medium]2、编写js[/size]
[size=medium](1)、在地图帮助类JS中加入:[/size]

//要素tip文字控件
var tooltipControl = new OpenLayers.Control.SelectFeature(com.nwd.map._vectorLayer_, {
hover: true,
highlightOnly: true,
eventListeners: {
beforefeaturehighlighted: showQtip,
}
});
this.map.addControl(tooltipControl);
//QTip文字显示==此方法也可以加入到JSP页面里
function showQtip(olEvent){
var elem = document.getElementById(olEvent.feature.geometry.id);
$(elem).qtip({
overwrite: false,
content: olEvent.feature.attributes.name,
position: {
at: 'right center',
my:'left center'
},
show: {
ready: true
},
style: {
classes: 'ui-tooltip-shadow ui-tooltip-blue'
}
}).qtip('show');
}

[size=medium](2)、在页面JS中加入:[/size]
function carInfoPOI(geoPoint,img) {
var address=geoPoint.address+"",address1,address2;
if(address.length>23){
address1=address.substring(0,23);
address2=address.substring(23,address.length);
address=address1+"<br>"+address2;
}
var divContent="<div style='font-size:12px;width:280px;'>"
+getCarNumber(geoPoint.deviceId)+"<hr>设备编号:"
+geoPoint.deviceId+"<br/>"
+"速度:"+geoPoint.speed+"km/h<br/>"
+"方向:"+geoPoint.direction+"点方向<br/>"
+"告警数据:"+geoPoint.alarm+"<br/>"
+"地址:"+address+"</div>";
var attributes = {
'name': divContent,
'longitude': geoPoint.lon_,
'latitude': geoPoint.lat_
};
var feature= new OpenLayers.Feature.Vector(geoPoint, attributes, intCarStyle(img,geoPoint.deviceId));
feature.deviceId=deviceId;feature.geoPoint=geoPoint;
return feature;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值