¿Cómo agregar un cuadro emergente a un vector en OpenLayers?

En una versión anterior de mi progtwig, usé markers para marcar puntos en el map. En la versión actual tuve que cambiar de markers a vectors , porque necesito la flexibilidad adicional. En la solución de marcadores, utilicé la function siguiente para agregar una window emergente a un marcador:

 function createPopupBoxFeature(vector, lonLat, description) { var feature = new OpenLayers.Feature(vector, lonLat); feature.closeBox = true; feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchonetworkingBubble, { "autoSize": true }); feature.data.popupContentHTML = description; vector.events.register("mousedown", feature, function(evt) { if (this.popup == null) { this.popup = this.createPopup(this.closeBox); map.addPopup(this.popup); this.popup.show(); } else { this.popup.toggle(); } OpenLayers.Event.stop(evt); }); return feature; } 

Pero ya no funciona para vectors , porque no tienen propiedad de events . ¿Cómo puedo solucionar esto?

2 Solutions collect form web for “¿Cómo agregar un cuadro emergente a un vector en OpenLayers?”

En realidad, la forma oficial de hacerlo es la siguiente:

(Nota: algunas de las variables no se han declarado en estos fragments: longt, lat, map)

http://dev.openlayers.org/examples/light-basic.html

 //Step 1 - create the vector layer var vectorLayer = new OpenLayers.Layer.Vector("ExampleLayer",{ eventListeners:{ 'featureselected':function(evt){ var feature = evt.feature; var popup = new OpenLayers.Popup.FramedCloud("popup", OpenLayers.LonLat.fromString(feature.geometry.toShortString()), null, feature.attributes.message+"<br>"+feature.attributes.location, null, true, null ); popup.autoSize = true; popup.maxSize = new OpenLayers.Size(400,800); popup.fixedRelativePosition = true; feature.popup = popup; map.addPopup(popup); }, 'featureunselected':function(evt){ var feature = evt.feature; map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } } }); //Step 2 - add feature to layer var p = new OpenLayers.Geometry.Point(longt, lat); var feature = new OpenLayers.Feature.Vector( p.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), {message:'foo', location:'bar'}, {externalGraphic: '../img/marker.png', graphicHeight: 21, graphicWidth: 16} ); vectorLayer.addFeatures(feature); //Step 3 - create the selectFeature control var selector = new OpenLayers.Control.SelectFeature(vectorLayer,{ hover:true, autoActivate:true }); //Step 4 - add the layer and control to the map map.addControl(selector); map.addLayer(vectorLayer); 

Resuelto por mí mismo. Aquí es cómo:

 // Used to display the dialog popup var selectControl; var selectedFeature; 

Agregar un SeleccionarFeature

  selectControl = new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: onFeatureSelect, onUnselect: onFeatureUnselect }); map.addControl(selectControl); selectControl.activate(); 

Manejadores de events

 function onPopupClose(evt) { selectControl.unselect(selectedFeature); } function onPopupFeatureSelect(feature) { selectedFeature = feature; popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), null, feature.name, null, true, onPopupClose); popup.panMapIfOutOfView = true; popup.autoSize = true; feature.popup = popup; map.addPopup(popup); } function onPopupFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } 

Almacene el contenido de la window emergente en el nombre del vector. Puede haber una solución mejor, pero no me importa. Agregar windows emergentes a vectores ya es bastante difícil.

 vector.name = "Your popup content"; 
  • problema emergente de JavaScript en Internet Explorer!
  • Evitar que se bloqueen los pop-ups
  • Mueva el nodo DOM a la window emergente
  • menu emergente de JavaScript y URL de networkingirección
  • cómo abrir una nueva window a través de javascript cuando el pop-up está bloqueado
  • Cómo un bookmarklet puede evitar el bloqueador de pop-ups
  • document.getElementbyId - ¿obteniendo más de una identificación a la vez?
  • Agregar llamada AJAX al bloqueador de windows emergentes activado por function
  • ¿Cómo confirmo que una window del browser está abierta, con Javascript?
  • javascript cierra una window emergente en enviar
  • Cómo cerrar window emergente y networkingirigir una página
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.