blocks|key|488515|text|听起来您想看一下"OpenLayers.Popup()“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488516|此示例显示了在绘制多边形后弹出窗口，然后单击它，但您应该能够将其更改为响应悬停。http://openlayers.org/dev/examples/select-feature-openpopup.html|offset|length|488517|entityMap|0|LINK|mutability|MUTABLE|url|http://openlayers.org/dev/examples/select-feature-openpopup.html^0|0|14|1S|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

It sounds like you want to look at "OpenLayers.Popup()"

this example shows a popup after you draw a polygon, then click on it, but you should be able to change it to respond to hover instead.
<a href="http://openlayers.org/dev/examples/select-feature-openpopup.html" rel="nofollow">http://openlayers.org/dev/examples/select-feature-openpopup.html</a>

blocks|key|704238|text|您需要使用selectControl来创建弹出窗口。要使其响应hover而不是单击构造函数中的set+hover:true。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|704239|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You need to use a selectControl to create your popup. To make it respond to hover instead of click set hover:true in the constructor.

blocks|key|488627|text|对于如何做到这一点的一个简单示例，您需要做几件事：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488628|创建一个矢量图层以包含您的标记并将其添加到地图：|488629|this.markerLayer+=+new+OpenLayers.Layer.Vector(
++++"My+Marker+Layer",
++++{+/*+configuration+options+are+set+here+*/+}
);
map.addLayer(this.markerLayer);|code-block|syntax|javascript|488630|创建您的标记并将其添加到地图：|488631|var+marker+=+new+OpenLayers.Feature.Vector(point,+attributes,+markerStyle);
this.markerLayer.addFeatures([marker]);|488632|为您的图层创建一个select控件，并注册一个函数，以便在用户将鼠标悬停在您的标记上时构建弹出窗口：|488633|var+selectControl+=+new+OpenLayers.Control.SelectFeature(this.markerLayer,+{
++++hover:+true
});
selectControl.events.register('featurehighlighted',+null,+onFeatureHighlighted);|488634|构建弹出窗口：|488635|onFeatureHighlighted:+function+(evt)+{
++++//+Needed+only+for+interaction,+not+for+the+display.
++++var+onPopupClose+=+function+(evt)+{
++++++++//+'this'+is+the+popup.
++++++++var+feature+=+this.feature;
++++++++if+(feature.layer)+{
++++++++++++selectControl.unselect(feature);
++++++++}++
++++++++this.destroy();
++++}

++++feature+=+evt.feature;
++++popup+=+new+OpenLayers.Popup.FramedCloud("featurePopup",
++++++++++++feature.geometry.getBounds().getCenterLonLat(),
++++++++++++new+OpenLayers.Size(100,100),
++++++++++++"<h2>"%2Bfeature.attributes.station_na+%2B+"</h2>"+%2B
++++++++++++"Location:+"+%2B+feature.attributes.location+%2B+' '+%2B
++++++++++++"Elevation:+"+%2B+feature.attributes.elev_,
++++++++++++null,+true,+onPopupClose);
++++feature.popup+=+popup;
++++popup.feature+=+feature;
++++map.addPopup(popup,+true);
},+//+...|488636|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

For a simple example of how to do this, you need to do a couple of things:

Create a vector layer to contain your markers and add it to the map:

<pre><code>this.markerLayer = new OpenLayers.Layer.Vector(
 "My Marker Layer",
 { /* configuration options are set here */ }
);
map.addLayer(this.markerLayer);
</code></pre>

Create your marker and add it to the map:

<pre><code>var marker = new OpenLayers.Feature.Vector(point, attributes, markerStyle);
this.markerLayer.addFeatures([marker]);
</code></pre>

Create a select control for your layer, and register a function to build your popup when the user hovers over your marker:

<pre><code>var selectControl = new OpenLayers.Control.SelectFeature(this.markerLayer, {
 hover: true
});
selectControl.events.register('featurehighlighted', null, onFeatureHighlighted);
</code></pre>

Build your popup:

<pre><code>onFeatureHighlighted: function (evt) {
 // Needed only for interaction, not for the display.
 var onPopupClose = function (evt) {
 // 'this' is the popup.
 var feature = this.feature;
 if (feature.layer) {
 selectControl.unselect(feature);
 } 
 this.destroy();
 }

 feature = evt.feature;
 popup = new OpenLayers.Popup.FramedCloud("featurePopup",
 feature.geometry.getBounds().getCenterLonLat(),
 new OpenLayers.Size(100,100),
 "&lt;h2&gt;"+feature.attributes.station_na + "&lt;/h2&gt;" +
 "Location: " + feature.attributes.location + '&lt;br/&gt;' +
 "Elevation: " + feature.attributes.elev_,
 null, true, onPopupClose);
 feature.popup = popup;
 popup.feature = feature;
 map.addPopup(popup, true);
}, // ...
</code></pre>

blocks|key|704363|text|您可以使用标记和弹出窗口|type|unstyled|depth|inlineStyleRanges|entityRanges|data|704364|示例：|704365|var+popup;
var+marker_layer+=+new+OpenLayers.Layer.Markers(+"Markers"+);
var+size+=+new+OpenLayers.Size(32,32);
var+offset+=+new+OpenLayers.Pixel(-(size.w/2),+-size.h);
var+icon_marker+=+new+OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',
+++++++++++++++++++++++++++++++++++++++size,+
+++++++++++++++++++++++++++++++++++++++offset);
marker+=+new+OpenLayers.Marker(new+OpenLayers.LonLat(5.6,+50.6),+icon_marker);

//here+add+mouseover+event
marker.events.register('mouseover',+marker,+function(evt)+{
++++popup+=+new+OpenLayers.Popup.FramedCloud("Popup",
++++++++new+OpenLayers.LonLat(5.6,+50.6),
++++++++null,
++++++++'<div>Hello+World!+Put+your+html+here</div>',
++++++++null,
++++++++false);
++++map.addPopup(popup);
});
//here+add+mouseout+event
marker.events.register('mouseout',+marker,+function(evt)+{popup.hide();});

marker_layer.addMarker(marker);
map.addLayer(marker_layer);|code-block|syntax|javascript|704366|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can use marker and popup
example :
<pre><code>var popup;
var marker_layer = new OpenLayers.Layer.Markers( &quot;Markers&quot; );
var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon_marker = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',
 size, 
 offset);
marker = new OpenLayers.Marker(new OpenLayers.LonLat(5.6, 50.6), icon_marker);

//here add mouseover event
marker.events.register('mouseover', marker, function(evt) {
 popup = new OpenLayers.Popup.FramedCloud(&quot;Popup&quot;,
 new OpenLayers.LonLat(5.6, 50.6),
 null,
 '&lt;div&gt;Hello World! Put your html here&lt;/div&gt;',
 null,
 false);
 map.addPopup(popup);
});
//here add mouseout event
marker.events.register('mouseout', marker, function(evt) {popup.hide();});

marker_layer.addMarker(marker);
map.addLayer(marker_layer);
</code></pre>

blocks|key|488737|text|我使用一个函数来添加它，这是一个简化的版本。请注意，您设置了细节并调用了底部的函数。还请注意，你不能在多个层上有多个选择器-我认为只有最后添加的选择器才能工作，所以如果你想在一个层中有多个功能，你必须调整它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488738|function+addMarkerLayer(markerInfo){
++++var+details=+markerInfo.details+%7C%7C+"<h3>"%2BmarkerInfo.title%2B"</h3>"%2B
++++++++"[Location]+Lat:"%2BmarkerInfo.latitude+%2B+"+Lon:"%2BmarkerInfo.longitude;

++++var+features=[];
++++features.push(new+OpenLayers.Feature.Vector(
++++++++new+OpenLayers.Geometry.Point(markerInfo.longitude,+markerInfo.latitude),
++++++++{title:+markerInfo.title,+details:details,+externalGraphic:markerInfo.icon},
++++++++{
++++++++++++externalGraphic:markerInfo.icon,
++++++++++++fillColor:+markerInfo.markerColor+%7C%7C+'#ff0',
++++++++++++fillOpacity:+markerInfo.iconOpacity+%7C%7C+0.8,
++++++++++++graphicWidth+++:+markerInfo.iconSize+%7C%7C+24,
++++++++++++graphicHeight++:+markerInfo.iconSize+%7C%7C+24,
++++++++++++strokeColor:+markerInfo.markerStrokeColor+%7C%7C+"#ee9900",
++++++++++++strokeOpacity:+1,
++++++++++++strokeWidth:+1,
++++++++++++pointRadius:+7
++++++++}
++++));

++++//+create+the+layer+with+listeners+to+create+and+destroy+popups
++++var+vector+=+new+OpenLayers.Layer.Vector(markerInfo.layerName,+{
++++++++eventListeners:+{
++++++++++++'featureselected':+function(evt)+{
++++++++++++++++var+feature+=+evt.feature;
++++++++++++++++var+popup+=+new+OpenLayers.Popup.FramedCloud("popup",
++++++++++++++++++++OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
++++++++++++++++++++null,
++++++++++++++++++++feature.attributes.details,
++++++++++++++++++++null,
++++++++++++++++++++true);
++++++++++++++++feature.popup+=+popup;
++++++++++++++++map.addPopup(popup);
++++++++++++},
++++++++++++'featureunselected':+function(evt)+{
++++++++++++++++var+feature+=+evt.feature;
++++++++++++++++map.removePopup(feature.popup);
++++++++++++++++feature.popup.destroy();
++++++++++++++++feature.popup+=+null;
++++++++++++}
++++++++}
++++});
++++vector.addFeatures(features);

++++var+selector+=+new+OpenLayers.Control.SelectFeature(vector,+{
++++++++hover:+true
++++});

++++map.addLayer(vector);
++++map.addControl(selector);
}


var+markerInfo={
++++title:'Washington+DC',
++++latitude:38.8,
++++longitude:-77,
++++icon:"/icons/event.png",
++++iconSize:24
};
addMarkerLayer(markerInfo);|code-block|syntax|javascript|488739|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I use a function to add it, here's a simplified version. Note that you set the details and call the function at the bottom. Also note that you can't have multiple selectors on multiple layers - I think only the last one added will work, so you'll have to tweak it if you want multiple features in one layer:

<pre><code>function addMarkerLayer(markerInfo){
 var details= markerInfo.details || "&lt;h3&gt;"+markerInfo.title+"&lt;/h3&gt;"+
 "[Location] Lat:"+markerInfo.latitude + " Lon:"+markerInfo.longitude;

 var features=[];
 features.push(new OpenLayers.Feature.Vector(
 new OpenLayers.Geometry.Point(markerInfo.longitude, markerInfo.latitude),
 {title: markerInfo.title, details:details, externalGraphic:markerInfo.icon},
 {
 externalGraphic:markerInfo.icon,
 fillColor: markerInfo.markerColor || '#ff0',
 fillOpacity: markerInfo.iconOpacity || 0.8,
 graphicWidth : markerInfo.iconSize || 24,
 graphicHeight : markerInfo.iconSize || 24,
 strokeColor: markerInfo.markerStrokeColor || "#ee9900",
 strokeOpacity: 1,
 strokeWidth: 1,
 pointRadius: 7
 }
 ));

 // create the layer with listeners to create and destroy popups
 var vector = new OpenLayers.Layer.Vector(markerInfo.layerName, {
 eventListeners: {
 'featureselected': function(evt) {
 var feature = evt.feature;
 var popup = new OpenLayers.Popup.FramedCloud("popup",
 OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
 null,
 feature.attributes.details,
 null,
 true);
 feature.popup = popup;
 map.addPopup(popup);
 },
 'featureunselected': function(evt) {
 var feature = evt.feature;
 map.removePopup(feature.popup);
 feature.popup.destroy();
 feature.popup = null;
 }
 }
 });
 vector.addFeatures(features);

 var selector = new OpenLayers.Control.SelectFeature(vector, {
 hover: true
 });

 map.addLayer(vector);
 map.addControl(selector);
}


var markerInfo={
 title:'Washington DC',
 latitude:38.8,
 longitude:-77,
 icon:"/icons/event.png",
 iconSize:24
};
addMarkerLayer(markerInfo);
</code></pre>

blocks|key|488796|text|这对我很有效。最终变得简单，但花了一段时间：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488797|+var+marker+=+new+OpenLayers.Marker(position,+icon.clone());+++++++++++
+boothLayer.addMarker(marker);+++++++++++++++++++++++++++++++++++++++++

+marker.events.register('mouseover',+marker,+function()+{+++++++++++
+++var+msg+=+booth.get('name')+%2B'+-+'+%2B+booth.get('premises');++++++
+++var+popup+=+new+OpenLayers.Popup.FramedCloud("Popup",++++++++++++
+++++++position,+null,+'<div>'%2Bmsg%2B'</div>',+null,+false);++++++++++
+++map.addPopup(popup);+++++++++++++++++++++++++++++++++++++++++++++
+++marker.events.register('mouseout',+marker,+++++++++++++++++++++++
+++++setTimeout(+function()+{+popup.destroy();+},+4000));+++++++++++
+++});++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++|code-block|syntax|javascript|488798|注意鼠标输出事件的4000微秒延迟-可能更短，这取决于您的使用。|488799|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This works for me. Ended up being simple, but took a while:

<pre><code> var marker = new OpenLayers.Marker(position, icon.clone()); 
 boothLayer.addMarker(marker); 

 marker.events.register('mouseover', marker, function() { 
 var msg = booth.get('name') +' - ' + booth.get('premises'); 
 var popup = new OpenLayers.Popup.FramedCloud("Popup", 
 position, null, '&lt;div&gt;'+msg+'&lt;/div&gt;', null, false); 
 map.addPopup(popup); 
 marker.events.register('mouseout', marker, 
 setTimeout( function() { popup.destroy(); }, 4000)); 
 }); 
</code></pre>

Note the 4000 microsecond delay on the mouse out event - maybe could be shorter, depends on your use.

blocks|key|488822|text|This+example+from+a+userlist在展示如何将悬停和单击事件分配给向量层方面非常有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|488823|entityMap|0|LINK|mutability|MUTABLE|url|http://lists.osgeo.org/pipermail/openlayers-users/2010-February/016279.html^0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="http://lists.osgeo.org/pipermail/openlayers-users/2010-February/016279.html" rel="nofollow">This example from a userlist</a> was very helpful in showing how to have both hover and click events assigned to a vector layer.

blocks|key|704630|text|我用OL5.2的“自定义交互”openlayers.org/en/latest/examples/select-features.html写了一个这样的工作示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|704631|因此，您可以将要素添加到图层并将其添加到地图，然后创建如下所示的新交互|704632|const+interact+=+new+ol.interaction.Select({condition:+ol.events.condition.pointerMove});|code-block|syntax|javascript|704633|它指定它将在悬停时选择一个要素(指针移动)，然后将其添加到您的地图中，并关联当交互选择一个要素时应调用的函数(即，当您将鼠标悬停在一个要素上时)。|704634|map.addInteraction(interact);
interact.on('select',+showInfoWindow);|704635|并声明显示信息窗口的函数|704636|function+showInfoWindow(evt){
++++if(evt.selected.length>0){
++++++++const+feature+=+evt.selected[0];
++++++++const+id+=+feature.getId();

++++++++infoWindow.innerHTML+=+''+%2B+id+%2B+'';
++++++++infoWindow.show();//if+you+have+something+like+that,+you+could+use+an+openLayers+overlay
++++}
}|704637|您应该注意到，该事件将返回(在本例中)一个对象，当您将鼠标悬停在其中时，您可以在'+selected‘属性中找到所选的特性。在这种情况下，当您将鼠标悬停在外面时，相同的对象将在“取消选择”属性中可用，直到您选择一个新对象为止|704638|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I wrote a working exemple of this with ol 5.2 exemple "Custom Interaction"
openlayers.org/en/latest/examples/select-features.html

So you add features to a layer and add it to the map and then you create a new Interaction like this

<pre><code>const interact = new ol.interaction.Select({condition: ol.events.condition.pointerMove});
</code></pre>

It specifies that it will select a feature on hover (pointermove)
Then you add it to your map and associate the function that should be called when the interaction selects a feature (i.e. when you hovers over one).

<pre><code>map.addInteraction(interact);
interact.on('select', showInfoWindow);
</code></pre>

And you declare your function that shows the info window

<pre><code>function showInfoWindow(evt){
 if(evt.selected.length&gt;0){
 const feature = evt.selected[0];
 const id = feature.getId();

 infoWindow.innerHTML = '&lt;p&gt;' + id + '&lt;/p&gt;';
 infoWindow.show();//if you have something like that, you could use an openLayers overlay
 }
}
</code></pre>

You should note that the event will return (in this case) an object where you can find the selected feature in the 'selected' attribute when you hover in it. When you hover out, in this case, the same object will be available in the 'deselected' attribute until you select a new one

It sounds so simple but I can't find any newbie tutorial: Could anybody give me a simple example how I create (vektor)markers in OpenLayers that open an infowindow on mouseover and even close it on mouseout?

I found parts of this explained but not all of it....

openlayers simple mouseover on marker

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

这听起来很简单，但我找不到任何新手教程:谁能给我一个简单的例子，我如何在OpenLayers中创建(Vektor)标记，在鼠标悬停时打开一个信息窗口，甚至在鼠标移出时关闭它？我找到了其中的一部分，但并不是全部...

问openlayers简单的鼠标悬停在标记上
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问openlayers简单的鼠标悬停在标记上EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问openlayers简单的鼠标悬停在标记上
EN