OpenLayers2 Vector Event Popup con caja de texto

Question

El mapa de OpenLayers aquí: http://www.dassh.ac.uk/demonstrations/valmer/demo5.html

tiene un evento para añadir una capa vectorial, además de crear un cuadro de texto en la página de abajo. Idealmente, me gustaría que el evento de clic para agregar el marcador, además de mostrar una ventana emergente con un textbox/textarea donde el usuario puede rellenar información sobre la ubicación. Esta información se enviará a la caja de texto de abajo.

¿Alguien puede ayudar?

Answer 1

Utilice un control.select añadido a una capa vectorial, se puede ver un ejemplo de dibujo y selección de un polígono aquí

Al mostrar su ventana emergente, incluiría los campos que necesitan ser actualizados, junto con un botón para actualizar su base de datos usando AJAX, o podría actualizar algunos elementos html según el ejemplo que proporcionó.

Este es un ejemplo de uso del control.select y tomando parte del código del ejemplo que proporcionaste:

    function onFeatureSelect(feature) {
        selectedFeature = feature;
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                 feature.geometry.getBounds().getCenterLonLat(),
                                 null,
                                 "<div id='"+ vid + "'><input type='hidden' name='lat' value='"+ addLat.lat + "'><input type='hidden' name='lon' value='"+ addLat.lon + "'><button onclick=removeSite('"+ vid + "')><img src='images/editing-delete-icon.png' height='40' alt='Delete Site'></button><textarea name='comment' placeholder='Site Description'></textarea><br/></div>",
                                 null, true, onPopupClose);
        feature.popup = popup;
        map.addPopup(popup);
    }
    function onFeatureUnselect(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }    
        selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
            {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);

Tendrá que modificar el código de la ventana emergente para actualizar su base de datos a través de una llamada AJAX o algunas áreas HTML adicionales en su página.