如果 div 在 OpenLayers 3 中关闭,则移除 'singleclick' 地图事件
Remove 'singleclick' map event if div is closed in OpenLayers 3
我在 OpenLayers 3 网络地图上有一个按钮,单击该按钮会激活一个功能,当用户单击地图时,该按钮会在 div 中显示 returns Google 街景图像。
这工作正常,但我想做的是在 div 关闭时禁用此地图点击功能。
目前我有:
$("#street-view").click(function() {
map.on('singleclick', function(evt) {
var coord = evt.coordinate;
var x = coord[0];
var y = coord[1];
var os1w = new OSRef(x, y);
var coordres = os1w.toLatLng(os1w);
coordres.OSGB36ToWGS84();
xResult = coordres.toLatString();
yResult = coordres.toLngString();
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('street-view-image'));
var googleCoord = new google.maps.LatLng(xResult,yResult);
sv.getPanorama({location: googleCoord, radius: 20}, getStreetViewImage);
});
});
function getStreetViewImage(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 0,
pitch: 0
});
$('#street-view-pane').fadeIn("slow");
panorama.setVisible(true);
} else {
$("#street-view-image").html("Sorry! No Street View images are available at this location.");
}
}
$("#close-street-view").click(function(evt) {
$('#street-view-pane').fadeOut("slow");
});
我已经尝试在 for 循环中创建一个 if 语句来说明如果循环大于 0 并且 div 是打开的,那么 运行 代码(所以如果 div 没有显示然后什么也不做)-但这不起作用。
是否有一种简单的方法可以在 div 关闭后停止单击事件?我有一个单击事件,用于识别页面加载时启用的地图上的要素,因此我无法禁用所有单击功能。
谢谢
ol.Map
的 on
方法 returns 该事件侦听器的唯一键。如果您希望能够取消事件侦听器,请保存该密钥并将其与 unByKey
方法一起使用。
示例:
1.
// adding select event
this.olSelectkey=this.select.on('select', function(evt){
//your code
});
//removing select event
this.select.unByKey(this.olSelectkey);
//map single click event
this.mapCursorKey=this.map.on("singleclick", function (evt) {
var hit = this.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
return true;
});
if (hit) {
this.getTarget().style.cursor = 'pointer';
} else {
this.getTarget().style.cursor = '';
}
});
//remove cursor pointer change event
this.map.unByKey(this.mapCursorKey);
我在 OpenLayers 3 网络地图上有一个按钮,单击该按钮会激活一个功能,当用户单击地图时,该按钮会在 div 中显示 returns Google 街景图像。
这工作正常,但我想做的是在 div 关闭时禁用此地图点击功能。
目前我有:
$("#street-view").click(function() {
map.on('singleclick', function(evt) {
var coord = evt.coordinate;
var x = coord[0];
var y = coord[1];
var os1w = new OSRef(x, y);
var coordres = os1w.toLatLng(os1w);
coordres.OSGB36ToWGS84();
xResult = coordres.toLatString();
yResult = coordres.toLngString();
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('street-view-image'));
var googleCoord = new google.maps.LatLng(xResult,yResult);
sv.getPanorama({location: googleCoord, radius: 20}, getStreetViewImage);
});
});
function getStreetViewImage(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 0,
pitch: 0
});
$('#street-view-pane').fadeIn("slow");
panorama.setVisible(true);
} else {
$("#street-view-image").html("Sorry! No Street View images are available at this location.");
}
}
$("#close-street-view").click(function(evt) {
$('#street-view-pane').fadeOut("slow");
});
我已经尝试在 for 循环中创建一个 if 语句来说明如果循环大于 0 并且 div 是打开的,那么 运行 代码(所以如果 div 没有显示然后什么也不做)-但这不起作用。
是否有一种简单的方法可以在 div 关闭后停止单击事件?我有一个单击事件,用于识别页面加载时启用的地图上的要素,因此我无法禁用所有单击功能。
谢谢
ol.Map
的 on
方法 returns 该事件侦听器的唯一键。如果您希望能够取消事件侦听器,请保存该密钥并将其与 unByKey
方法一起使用。
示例:
1.
// adding select event
this.olSelectkey=this.select.on('select', function(evt){
//your code
});
//removing select event
this.select.unByKey(this.olSelectkey);
//map single click event
this.mapCursorKey=this.map.on("singleclick", function (evt) {
var hit = this.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
return true;
});
if (hit) {
this.getTarget().style.cursor = 'pointer';
} else {
this.getTarget().style.cursor = '';
}
});
//remove cursor pointer change event
this.map.unByKey(this.mapCursorKey);