openlayers标记上的简单鼠标悬停

这听起来很简单，但我找不到任何新手教程：有谁能给我一个简单的例子，我如何在OpenLayers中创建（vektor）标记，在mouseover上打开信息窗口，甚至在mouseout上关闭它

---

我找到了部分解释，但不是全部…

听起来你想看看“OpenLayers.Popup（）

本例显示了绘制多边形后的弹出窗口，然后单击它，但您应该能够将其更改为响应悬停。

---

您需要使用selectControl创建弹出窗口。要使其响应悬停，而不是在构造函数中单击“设置悬停：true”。

有关如何执行此操作的简单示例，您需要执行以下几项操作：

创建包含标记的矢量图层，并将其添加到地图：

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

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

创建标记并将其添加到地图：

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

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

为图层创建一个选择控件，并注册一个函数，以便在用户将鼠标悬停在标记上时生成弹出窗口：

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

构建您的弹出窗口：

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>"+feature.attributes.station_na + "</h2>" +
            "Location: " + feature.attributes.location + '<br/>' +
            "Elevation: " + feature.attributes.elev_,
            null, true, onPopupClose);
    feature.popup = popup;
    popup.feature = feature;
    map.addPopup(popup, true);
}, // ...

on突出显示的功能：功能（evt）{
//仅用于交互，不用于显示。
var onPopupClose=函数（evt）{
//“这”是弹出窗口。
var-feature=这个.feature；
if（feature.layer）{
选择控制。取消选择（功能）；
}  
这个。销毁（）；
}
特征=evt.feature；
popup=新建OpenLayers.popup.FramedCloud（“功能弹出”，
feature.geometry.getBounds（）.getCenterLonLat（），
新OpenLayers.尺寸（100100），
“”+feature.attributes.station\u na+“”+
“位置：“+feature.attributes.Location+”
”+
“高程：”+feature.attributes.elev_2;，
null、true、onPopupClose）；
feature.popup=弹出窗口；
popup.feature=特征；
map.addPopup（弹出，true）；
}, // ...

您可以使用标记和弹出窗口

例如：

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);

var弹出窗口；
var marker_layer=新的OpenLayers.layer.Markers（“Markers”）；
var size=新的OpenLayers.size（32,32）；
var偏移=新的OpenLayers.Pixel（-（大小为w/2），-size.h）；
var icon\u marker=新的OpenLayers.icon（'http://www.openlayers.org/dev/img/marker.png',
大小，
抵消）；
marker=新OpenLayers.marker（新OpenLayers.LonLat（5.6,50.6），图标\标记）；
//此处添加鼠标悬停事件
marker.events.register（'mouseover'，marker，function（evt）{
popup=新建OpenLayers.popup.FramedCloud（“弹出”，
新OpenLayers.LonLat（5.6,50.6），
无效的
“你好，世界！把你的html放在这里”，
无效的
假）；
map.addPopup（弹出窗口）；
});
//这里添加mouseout事件
register（'mouseout'，marker，function（evt）{popup.hide（）；}）；
标记层。添加标记（标记）；
map.addLayer（标记层）；

我使用一个函数来添加它，这里是一个简化版本。请注意，您设置了详细信息并调用了底部的函数。另外请注意，您不能在多个图层上使用多个选择器-我认为只有最后添加的选择器才有效，因此如果您希望在一个图层中使用多个功能，则必须对其进行调整：

function addMarkerLayer(markerInfo){
    var details= markerInfo.details || "<h3>"+markerInfo.title+"</h3>"+
        "[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);

函数addMarkerLayer（markerInfo）{
var details=markerInfo.details | |“”+markerInfo.title+“”+
“[位置]纬度：”+markerInfo.lation+“Lon:”+markerInfo.longitude；
var特征=[]；
features.push（新的OpenLayers.Feature.Vector(
新OpenLayers.Geometry.Point（markerInfo.longitude，markerInfo.latitude），
{title:markerInfo.title，details:details，externalGraphic:markerInfo.icon}，
{
外部图形：markerInfo.icon，
fillColor:markerInfo.markerColor | | |'#ff0'，
fillOpacity:markerInfo.iconCapacity | | 0.8，
graphicWidth:markerInfo.iconSize | | 24，
图形高度：markerInfo.iconSize | | 24，
strokeColor:markerInfo.markerStrokeColor | | |“#ee9900”，
频闪不透明度：1，
冲程宽度：1，
点半径：7
}
));
//使用侦听器创建层以创建和销毁弹出窗口
var vector=新的OpenLayers.Layer.vector（markerInfo.layerName{
eventListeners：{
“featureselected”：函数（evt）{
var特征=evt特征；
var popup=new OpenLayers.popup.FramedCloud（“popup”，
OpenLayers.LonLat.fromString（feature.geometry.toShortString（）），
无效的
feature.attributes.details，
无效的
正确的）；
feature.popup=弹出窗口；
map.addPopup（弹出窗口）；
},
“featureunselected”：函数（evt）{
var特征=evt特征；
map.removeppopup（feature.popup）；
feature.popup.destroy（）；
feature.popup=null；
}
}
});
矢量。添加特征（特征）；
var选择器=新建OpenLayers.Control.SelectFeature（向量{
悬停：对
});
map.addLayer（向量）；
map.addControl（选择器）；
}
马尔克林福={
标题：“华盛顿特区”，
纬度：38.8，
经度：-77，
图标：“/icons/event.png”，
iconSize:24
};
addMarkerLayer（markerInfo）；

这对我很有用。结果很简单，但花了一段时间：

 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, '<div>'+msg+'</div>', null, false);          
   map.addPopup(popup);                                             
   marker.events.register('mouseout', marker,                       
     setTimeout( function() { popup.destroy(); }, 4000));           
   });                                                              

var marker=newopenlayers.marker（位置，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”，
位置，空，“+msg+”，空，假）；
map.addPopup（弹出窗口）；
marker.events.register（'mouseout'，marker，
setTimeout（函数（）{popup.destroy（）；}，4000））；
});                                                              

注意

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

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