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

最新推荐文章于 2023-11-21 14:38:29 发布

boonyaAlishing

最新推荐文章于 2023-11-21 14:38:29 发布

阅读量813

点赞数 1

分类专栏： Java-Web 文章标签： jquery jsp JavaScript openlayers feature ViewUI

本文链接：https://blog.csdn.net/boonyaAlishing/article/details/84383999

版权

Java-Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[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;
}