`

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

阅读更多
首先在官网下载qtip插件:http://craigsworks.com/projects/qtip/
1、导入插件
 <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>

2、编写js
(1)、在地图帮助类JS中加入:
//要素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');
}

(2)、在页面JS中加入:
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;
}
分享到:
评论
1 楼 dllhenu 2014-10-25  
你好,我让ol加载tiptip,但是tiptip没有在点所在的位置显示,不知道怎么回事啊?

相关推荐

    OpenLayers地图要素tooltip[文字提示]

    在OpenLayers中,"tooltip"(文字提示)是一种常见的功能,用于提供关于地图上特定要素的额外信息,当用户将鼠标悬停在要素上方时,会显示一个包含相关信息的小窗口。 在OpenLayers中实现地图要素的tooltip,通常...

    openlayers3要素移动交互并弹出要素信息

    我们可以创建一个新的`ol.Overlay`实例,设置其位置(基于鼠标位置或点要素的位置),内容(点要素的信息),以及显示和隐藏的逻辑。在鼠标进入和离开点要素时,显示或隐藏这个弹出框。 6. **信息显示**:点要素的...

    openlayers5加载线要素.zip

    本示例关注的是如何使用OpenLayers 5在天地图(China's TianDiTu map)上绘制线要素。 在OpenLayers中,线要素通常表示为`ol.geom.LineString`对象,它是由一系列坐标对组成的。首先,我们需要创建一个线要素,然后...

    openlayers加载本地切片、高亮显示

    以上就是使用OpenLayers加载本地切片并实现高亮显示的基本流程。在实际应用中,你可能还需要处理各种边界情况,比如切片加载错误、地图缩放时的切片预加载策略等。此外,为了更好地管理切片,你可以考虑使用一个...

    基于Openlayers的水利信息在线分析服务系统

    《基于Openlayers的水利信息在线分析服务系统》是一款利用Openlayers3、JQuery、.NET框架和SQLSERVER数据库技术构建的WebGIS应用。这个系统旨在提供一个交互式的平台,用于在线处理和分析水利信息,帮助决策者更好地...

    openlayers典型例子展示

    OpenLayers提供了改变显示内容的功能,用户可以根据需要改变地图的显示内容,例如显示或隐藏要素、改变图层的顺序等。这种功能非常实用,例如在灾害监测、城市规划等领域。 七、 SLD OpenLayers支持SLD( Styled ...

    openlayers加载本地离线地图瓦片(重新发2018-10-23)

    在GIS(地理信息系统)领域,OpenLayers是一个广泛使用的开源JavaScript库,用于在Web浏览器中创建交互式的地图应用。本文将详细讲解如何利用OpenLayers加载本地离线地图瓦片,这在没有网络连接或者需要保障地图数据...

    mapquery, 结合OpenLayers和jQuery的强大功能.zip

    mapquery, 结合OpenLayers和jQuery的强大功能 MapQuery更多信息可以在 http://github.com/mapquery 获得。当前的文档是演示目录中的示例。 请随意为这个自述文件写些东西:)为了让演示工作正常,你需要获取所有依赖...

    使用openlayers加载离线地图实例

    8. **测试与调试**:在不同设备和浏览器上测试应用,确保地图加载正确,无错乱或显示问题。使用开发者工具进行调试,优化性能。 通过以上步骤,你可以成功地使用OpenLayers加载离线地图,并通过mui将其打包成移动...

    openLayers geoserver常见问题

    解析XML在OpenLayers中通常使用JavaScript的内置DOM解析器,例如`document.createElement`, `getElementsByTagName`, `getAttribute`等方法,或者使用jQuery等库简化操作。 关于OpenLayers的popup(弹窗),可以...

    openlayers3添加闪烁点

    在OpenLayers 3中添加闪烁点是一项常见的需求,特别是在地理信息系统(GIS)应用中,用于突出显示特定位置或实时更新的数据。OpenLayers 是一个流行的JavaScript库,用于在Web浏览器中展示地图,支持多种数据源和...

    openlayers 编辑geoserver图层

    OpenLayers是一个JavaScript库,用于在Web浏览器中显示地图,而GeoServer则是一个基于Java的服务,它允许用户发布、管理和操作地理空间数据。本资源主要针对初级学习者,介绍如何使用OpenLayers对GeoServer图层进行...

    openlayers3点选、框选、多边形选择demo

    如果重合,就选择该要素并触发相应的操作,例如高亮显示或弹出信息窗口。点选通常适用于选择特定的点状要素,如标记、图标等。 2. **框选(Rectangle Selection)**: 框选允许用户通过拖动鼠标绘制一个矩形框,...

    openlayers 加载天地图示例

    OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的地图应用。它支持多种地图服务,包括全球知名的地图服务提供商——天地图。天地图是中国官方的地理信息公共服务平台,提供丰富的地形图、卫星...

    OpenLayers动画效果显示路线

    在JavaScript中,你可以使用`setTimeout`或`setInterval`函数来定时更新地图上的标记位置,从而创建动画效果。 创建动画的关键步骤如下: 1. **加载地图和数据**:首先,你需要加载包含路线数据的地图图层。这通常...

    OpenLayers附加js支持,jqurey,drawTree

    结合jQuery,我们可以实现更加流畅的用户交互,比如在绘制或编辑树结构时提供拖放功能,或者在地图上选择节点时显示相关信息。同时,jQuery的动画效果也可以增强视觉体验,使得地图操作更加生动和吸引人。 在提供的...

    openLayers完整代码示例数据

    这个压缩包文件包含了一系列JSON数据,很可能是用于OpenLayers中展示地理信息的配置或样例数据。 首先,我们来看一下这些文件的命名: - lishicaoqu.json:可能代表历史草区的数据,可能包含了地理坐标和相关属性...

    openlayers中文.rar

    - **图层操作**:`layer.setVisible(true/false)`切换图层显示状态,`source.addFeature(feature)`添加矢量要素。 - **样式设置**:通过Style和StyleMap对图层和特征进行样式定制。 - **瓦片服务**:通过...

    openlayers3+ 地图右键

    在OpenLayers 3及以上版本中,地图右键功能的实现是一项关键操作,它允许用户与地图交互并执行特定任务,如获取地图上的坐标、测量距离、添加标记等。本篇文章将详细探讨如何在OpenLayers中自定义地图右键菜单,以...

    openlayers

    此外,它还支持图层控制,允许用户动态加载、隐藏或显示特定的地图层。 OpenLayers 的核心组件包括: 1. 控件(Controls):如导航控件(ZoomIn/Out、Pan)、信息框(InfoBox)、全屏控件等,它们为用户提供直观的...

Global site tag (gtag.js) - Google Analytics