Question

我正在使用Openlayers 3开发Web地图应用程序，我在地图上显示功能（点），当我点击它们时，我会显示一个弹出窗口，我添加了一个按钮。这是首先是弹出窗口和按钮代码：

map.on('singleclick', function(evt) {
popup.hide();
popup.setOffset([0, 0]);

 // Attempt to find a feature in one of the visible vector layers
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
return feature;
});
if (feature) {
    var coord = feature.getGeometry().getCoordinates();
    var props = feature.getProperties();
    var info =  "<input type='button' id='popupButton' value='Get here ?' />" ;
    // Offset the popup so it points at the middle of the marker not the tip
    popup.setOffset([0, -22]);
    popup.show(coord, info);
    }   
});

之后我在stackoverflow中看到了一些类似的问题，我尝试使用此代码在事件触发时启动函数：

$(document).on("click", "#popupButton", function(){
      alert(nearest_feature(my_position)); 
});

问题是事件没有被触发，我尝试用'#map'替换文档（这是显示地图的div），但仍然没有。

如何在弹出窗口中触发该按钮的事件？

Answer 1

我尝试实现它，我认为你使用它的方式，它有效吗？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="1">

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text" />

    <EditText
        android:id="@+id/setText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:enabled="true"
        android:inputType="numberDecimal"
        android:textSize="24sp" />
</LinearLayout>

https://jsfiddle.net/d9eubeeu/

Answer 2

我使用@JesperHøjer和@Marius在他们的答案中给出的代码一开始没有用，所以我把它添加到：

map.on('singleclick', function(evt){
---------
$("#popupButton").on("click", function(){
      alert(nearest_feature(my_position)); 
});
}

现在该事件已被触发

Answer 3

可能是事件正在冒泡吗？地图上已经有一个听众。可能在弹出窗口中也可能有一个。如果您将事件作为参数传递给函数，则可以使用：

event.stopPropagation();

如何在Ol3弹出窗口中使用javascript创建的按钮上添加单击事件？

3 个答案: