var v_style = new OpenLayers.StyleMap({ 'default': new OpenLayers.Style({ graphicWidth : 60, graphicHeight: 25, graphicTitle:"dddd", fillColor: "#ee9900", fillOpacity: 0, hoverFillColor: "#66CCCC", hoverFillOpacity: 0, strokeColor: "#ffff00", strokeOpacity: 0, strokeWidth: 2, strokeLinecap: "round", strokeDashstyle: "solid", hoverStrokeColor: "red", hoverStrokeOpacity: 1, hoverStrokeWidth: 1, pointRadius: 6, hoverPointRadius: 1, hoverPointUnit: "%", pointerEvents: "visiblePainted", cursor: "inherit", fontColor: "#000000", labelAlign: "cm", labelOutlineColor: "white", labelOutlineWidth: 3, label: "" }), 'select': new OpenLayers.Style({ fillColor: "#99CCFF",//bule fillOpacity: 0.8, hoverFillColor: "white", hoverFillOpacity: 0.8, strokeColor: "#ffff00", strokeOpacity: 1, strokeWidth: 2, strokeLinecap: "round", strokeDashstyle: "solid", hoverStrokeColor: "red", hoverStrokeOpacity: 1, hoverStrokeWidth: 0.3, pointRadius: 6, hoverPointRadius: 1, hoverPointUnit: "%", pointerEvents: "visiblePainted", cursor: "pointer", fontColor: "#000000", labelAlign: "cm", labelOutlineColor: "white", labelOutlineWidth: 3 }), 'hover': new OpenLayers.Style({ fillColor: "#99CCFF",//bule fillOpacity: 0.3, hoverFillColor: "white", hoverFillOpacity: 0.8, strokeColor: "#ffff00", strokeOpacity: 1, strokeWidth: 2, strokeLinecap: "round", strokeDashstyle: "solid", hoverStrokeColor: "red", hoverStrokeOpacity: 1, hoverStrokeWidth: 0.3, pointRadius: 6, hoverPointRadius: 1, hoverPointUnit: "%", pointerEvents: "visiblePainted", cursor: "pointer", fontColor: "#000000", label: "1232123", graphicWidth : 60, graphicHeight: 25, graphicTitle:"dddd", labelAlign: "cm", labelOutlineColor: "white", labelOutlineWidth: 3 }) }); var first = new OpenLayers.Layer.Vector("1", { protocol: new OpenLayers.Protocol.HTTP({ url: "map.json", format: new OpenLayers.Format.GeoJSON(), displayInLayerSwitcher:true, strategies: [new OpenLayers.Strategy.Fixed()], styleMap: v_style }) });
var highlightCtrl = new OpenLayers.Control.SelectFeature([first], { hover:true, highlightOnly: true, renderIntent: "hover", <span style="white-space:pre"> </span>}); <span style="white-space:pre"> </span> map.addControl(highlightCtrl); highlightCtrl.activate(); //弹窗 var selectControl = new OpenLayers.Control.SelectFeature([first], { <span style="white-space:pre"> </span> clickout: true, onSelect: onFeatureSelect, onUnselect: onFeatureUnselect }); map.addControl(selectControl); selectControl.activate();
function onFeatureSelect(feature) { selectedFeature = feature; <span style="white-space:pre"> </span> var id = selectedFeature.attributes['id']; <span style="white-space:pre"> </span> var html = "<div style='font-size:.8em ;color:red; height:300px; width:350px;padding-left: 14px;'><iframe id='ifmcontent' style='width: 100%; height:100%;' src='' frameborder='no' scrolling='no' allowtransparency></iframe></div>"; var popup = new OpenLayers.Popup.FramedCloud("popup", feature.geometry.getBounds().getCenterLonLat(), null, html, null, true ); popup.panMapIfOutOfView = true; popup.autoSize = true; <span style="white-space:pre"> </span>feature.popup = popup; map.addPopup(popup); } function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } function onMakerMouseDown(evt) { OpenLayers.Event.stop(evt); }