openlayers简单的鼠标悬停在标记

Question

这听起来很简单，但我找不到任何新手教程：任何人都可以给我一个简单的例子，我如何在OpenLayers中创建（vektor）标记，在mouseover上打开一个infowindow，甚至在mouseout上关闭它？

我发现这部分解释，但不是所有的....

Answer 1

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

这个例子说明你画后弹出一个多边形，然后点击它，但你应该能够改变它来响应悬停。 http://openlayers.org/dev/examples/select-feature-openpopup.html

Answer 2

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

Answer 3

对于如何做一个简单的例子，你需要做两件事情：

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

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); 
}, // ... 

Answer 4

您可以使用标记和弹出

例如：

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

Answer 5

我用一个函数来添加它，这里是一个简化版本。请注意，您可以设置细节并在底部调用该功能。另外请注意，你不能对多层次多选择 - 我认为，只有最后一个加入将工作，所以你必须，如果你想在一个层的多个特性来调整它：

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

Answer 6

该作品为了我。结束了简单的，但过了好一会儿：

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

注意在鼠标离开事件4000微秒的延迟 - 或许可以更短，取决于您的使用。

Answer 7

This example from a userlist在展示如何将悬停和点击事件分配给矢量图层时非常有帮助。