javascript – 如何在OpenLayers中向向量添加弹出框?

前端之家收集整理的这篇文章主要介绍了javascript – 如何在OpenLayers中向向量添加弹出框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的程序的先前版本中,我使用标记标记地图上的点.在当前版本中,我不得不从标记更改为向量,因为我需要额外的灵活性.在标记解决方案中,我使用下面的函数标记添加一个弹出框: @H_403_2@function createPopupBoxFeature(vector,lonLat,description) { var feature = new OpenLayers.Feature(vector,lonLat); feature.closeBox = true; feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble,{ "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; }

但它不再适用于矢量,因为它们没有事件属性.我该如何解决

解决方法

实际上,官方的做法如下:

(注意:某些变量尚未在这些片段中声明:longt,lat,map)

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

@H_403_2@//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,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);
原文链接:https://www.f2er.com/js/159041.html

猜你在找的JavaScript相关文章