OpenLayers-在ol.Overlay上添加click事件 [英] OpenLayers - add click event on ol.Overlay

问题描述

我想将单击事件添加到OpenLayers中的ol.Overlay.最好的方法是什么?

I want to add click event to ol.Overlay in OpenLayers. What would be the best way to do this?

使用ol.Overlay的原因:我想添加一个可动态更改的带有图像和文本的自定义标记.为此，我使用ol.Overlay将HTML添加到元素中，如下所示:

Reason for using ol.Overlay: I want to add a custom marker with image and text that could be changed dynamically. For this, I am using ol.Overlay to add HTML in element as follows:

// Add markers
var marker = new ol.Overlay({
            position: ol.proj.fromLonLat(lng1, lat1),
    positioning: 'center-center',
    element: $(getMarkerContent())
});
map.addOverlay(marker);

function getMarkerContent() {
    var content = "<div>Name<........>";
    return content;
}

我尝试了以下操作:

1. 在元素上添加了onclick事件-可行

添加了marker.on('click', function(evt){});，但从未调用过

有更好的方法吗?

推荐答案

尝试在叠加层元素上而非直接在叠加层上设置点击处理程序:

Try to set the click handler on the overlay element and not directly on the overlay:

var textElement = $('<p class="overlay text">Text</p>');
var overlay = new ol.Overlay({
  position: pos,
  element: textElement
});
map.addOverlay(overlay);

textElement.click(function(evt) {
    console.log('click');
});

http://jsfiddle.net/jvdv489j/

这篇关于OpenLayers-在ol.Overlay上添加click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！