20

とても簡単に聞こえますが、初心者向けのチュートリアルが見つかりません: マウスオーバーで情報ウィンドウを開き、マウスアウトで閉じる (vektor) マーカーを OpenLayers で作成する方法の簡単な例を教えてください。

これの一部が説明されているのを見つけましたが、すべてではありません....

4

8 に答える 8

18

これを行う方法の簡単な例として、いくつかのことを行う必要があります。

マーカーを含むベクター レイヤーを作成し、マップに追加します。

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);
}, // ...
于 2012-06-18T20:37:51.043 に答える
12

マーカーとポップアップを使用できます

例 ：

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);
于 2012-07-06T09:55:44.810 に答える
3

これは私にとってはうまくいきます。シンプルになりましたが、しばらく時間がかかりました：

 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 マイクロ秒の遅延に注意してください。使用状況によっては、もっと短くなる可能性があります。

于 2013-04-27T00:56:29.890 に答える
1

関数を使用して追加します。これが簡略化されたバージョンです。詳細を設定し、下部にある関数を呼び出すことに注意してください。また、複数のレイヤーに複数のセレクターを配置することはできないことに注意してください。最後に追加したセレクターのみが機能すると思います。したがって、1つのレイヤーに複数の機能が必要な場合は、セレクターを微調整する必要があります。

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);
于 2013-01-25T16:59:14.310 に答える
1

ポップアップを作成するには、selectControl を使用する必要があります。クリックの代わりにホバーに応答させるには、コンストラクターで hover:true を設定します。

于 2012-04-01T19:51:06.050 に答える
0

ユーザーリストからのこの例は、ホバー イベントとクリック イベントの両方をベクター レイヤーに割り当てる方法を示すのに非常に役立ちました。

于 2013-05-02T00:32:53.293 に答える
-1

「OpenLayers.Popup()」を見たいようです

この例は、ポリゴンを描画してクリックした後のポップアップを示していますが、代わりにホバーに応答するように変更できるはずです。 http://openlayers.org/dev/examples/select-feature-openpopup.html

于 2011-12-24T00:23:21.440 に答える