Question

我很难改变一个工作脚本，该脚本会显示一个弹出窗口，其中包含所选KML功能的属性到一个版本，其中属性在鼠标悬停时弹出窗口显示，而无需选择该功能.. < / p>

或者，我想在屏幕的右上角放置一个带有属性内容的固定div，它会在鼠标悬停时弹出

非常感谢任何帮助！

http://gimoya.bplaced.net/Openlayers/Trails/map.html

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>OpenLayers Bergfex Map Example</title>
    <link rel="stylesheet" href="defaultstyle.css" type="text/css" />
    <style type="text/css">
        html, body: {
            height: 100%;
            width: 100%;
            position: relative;
        }
        .olControlAttribution {
            bottom: 3px;
        }

    </style>
    <script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
  </head>
  <body style="margin: 0;">
    <div id="map"></div>
    <script type="text/javascript">

        OpenLayers.Util.onImageLoadError = function() { this.style.display="none";}

        var proj900913 = new OpenLayers.Projection("EPSG:900913");
        var proj4326 = new OpenLayers.Projection("EPSG:4326");

        var map = new OpenLayers.Map( 'map', {
            projection: proj900913,
            displayProjection: proj4326,
            restrictedExtent: new OpenLayers.Bounds(1050550.516554,5839177.463709,1912760.195457,6283123.72391),
            controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Attribution()],
            theme: null,
            eventListeners: {
                "zoomend": function() {
                    if(map.getZoom() == 13 || map.getZoom() == 14) {
                        map.setBaseLayer(bergfex); 
                    }
                    if(map.getZoom() > 14) {
                        map.setBaseLayer(ghyb);
                    }   
                    if(map.getZoom() < 13) {
                        map.setBaseLayer(osm);
                    } 
                }
            }
        } );

        var bergfex = new OpenLayers.Layer.XYZ( "Bergfex",
            "http://static5.bergfex.at/images/amap/${z}$folder/${z}_${x}_${y}.png",
            {
                sphericalMercator: true,
                buffer: 0,
                attribution: "&copy; 2008, 2010 BEV, <a href='http://www.bergfex.at'>bergfex GmbH</a>",
                getURL: function(bounds) {
                    var path = OpenLayers.Layer.XYZ.prototype.getURL.apply(this, arguments);
                    var parts = path.split("$folder/");
                    var z = parseInt(parts[0].substr(-2));
                    path = path.replace("$folder", z>=14 ?
                        "/" + parts[1].substr(3, 2 + z-14) : "");
                    return path;
                }
            } );

        var ghyb = new OpenLayers.Layer.Google(
            "Google Hybrid",
            {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 17}
            // used to be {type: G_HYBRID_MAP, numZoomLevels: 20}
        );

        //var ocm = new OpenLayers.Layer.OSM("OpenCycleMap", ['http://tile.thunderforest.com/cycle/${z}/${x}/${y}.png']);
        var osm = new OpenLayers.Layer.OSM({numZoomLevels: 12});

        //default style for vector layer
        var style = new OpenLayers.Style({
            strokeColor: "#cc6633",
            strokeWidth: 2,
            strokeOpacity: 0.6
            })

        var KMLlayer = new OpenLayers.Layer.Vector("KML", {
            styleMap: new OpenLayers.StyleMap({
                "default": style,
                // selected style
                "select": {
                    strokeWidth: 4,
                    strokeColor: "#32a8a9"
                    }
                }),
            projection: map.displayProjection,
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "Trails.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: false, 
                    extractAttributes: true,
                    maxDepth: 2,
                    //'internalProjection': options.projections.source, //EPSG:3785/900913
                    //'externalProjection': options.projections.display //EPSG:4326
                })
            })
        });

        map.addLayers([KMLlayer, osm, ghyb, bergfex]);

        KMLlayer.events.register("loadend", KMLlayer, function (e) {
            map.zoomToExtent(KMLlayer.getDataExtent());
        });

        //map.setCenter(map.restrictedExtent.getCenterLonLat(), 8);

        //Add a selector control to the kmllayer with popup functions
        var controls = {
          selector: new OpenLayers.Control.SelectFeature(KMLlayer, { onSelect: createPopup, onUnselect: destroyPopup})
        };

        function createPopup(feature) {
          feature.popup = new OpenLayers.Popup("pop",
              feature.geometry.getBounds().getCenterLonLat(),
              new OpenLayers.Size(200,150),
              '<div class="markerContent">'+feature.attributes.description+'</div>',
              null,
              false,
              function() { controls['selector'].unselectAll(); }
          );
          feature.popup.closeOnMove = true;
          //feature.popup.setBackgroundColor("#FFBBBB");
          //feature.popup.setOpacity(0.1);
          map.addPopup(feature.popup);
        }

        function destroyPopup(feature) {
          feature.popup.destroy();
          feature.popup = null;
        }

        map.addControl(controls['selector']);
        controls['selector'].activate();

  </script>

  <div id="explanation">Klick auf Pfade gibt dir die Trail-Infos... Bei Zoom > 12 ist OpenStreetMap, bei Zoom 13 u. 14 ist Bergfex-OEK50 und bei Zoom > 14 ist Google Hybrid Basiskarte</div>

  </body>
</html>

鼠标悬停上的OpenLayers KML属性

0 个答案: