這聽起來很簡單,但我找不到任何新手教程:任何人都可以給我一個簡單的例子,我如何在OpenLayers中創建(vektor)標記,在mouseover上打開一個infowindow,甚至在mouseout上關閉它?openlayers簡單的鼠標懸停在標記
我發現這部分解釋,但不是所有的....
這聽起來很簡單,但我找不到任何新手教程:任何人都可以給我一個簡單的例子,我如何在OpenLayers中創建(vektor)標記,在mouseover上打開一個infowindow,甚至在mouseout上關閉它?openlayers簡單的鼠標懸停在標記
我發現這部分解釋,但不是所有的....
這聽起來像你想看看「OpenLayers.Popup()」
這個例子說明你畫後彈出一個多邊形,然後點擊它,但你應該能夠改變它來響應懸停。 http://openlayers.org/dev/examples/select-feature-openpopup.html
您需要使用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]);
創建圖層選擇控件,並註冊一個功能,當用戶將鼠標懸停在你的標記,以建立自己的彈出:
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);
}, // ...
您可以使用標記和彈出
例如:
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);
我用一個函數來添加它,這裏是一個簡化版本。請注意,您可以設置細節並在底部調用該功能。另外請注意,你不能對多層次多選擇 - 我認爲,只有最後一個加入將工作,所以你必須,如果你想在一個層的多個特性來調整它:
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);
該作品爲了我。結束了簡單的,但過了好一會兒:
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微秒的延遲 - 或許可以更短,取決於您的使用。
This example from a userlist在展示如何將懸停和點擊事件分配給矢量圖層時非常有幫助。
不完美..但絕對幫助大時間!歡呼@ kyle! – 2012-12-04 03:39:23
`懸停:真正`做到這一點。 UPVOTED :) – 2014-11-14 17:15:41
更好的解決方案,而不是將事件添加到添加到圖層的每個標記。 – Aerokneeus 2015-03-12 19:22:17