1

我是网络地图的新手，并尝试使用一些代码将 openlayers 地图包含到 div 中，包括来自 php 的 openlayers 代码。它将显示 div，但地图会沿着地图向下移动。应该怎么做才能更正我的代码？php 包含在地图 div 中

        <?php  include_once("gps_track.php") ;  ?>


        #map{
            clear:both;
            float:left;
            border:3px solid #330066;
            height:500px;
            width:70%;

        }

并在右侧有css的属性部分

               #attribute{
              float:right;
              border:3px solid #334353;
              height:500px;
              width:28%;
                  }

我应该为 css 使用来自 openlayes 的额外 div 吗？

js代码是： 

    var lat=27.6167
    var lon=85.5500
    var zoom=13

    var map;

    function init() {
        map = new OpenLayers.Map ("map", {
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.Attribution()],
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
            maxResolution: 156543.0399,
            numZoomLevels: 19,
            units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
        } );

        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
        map.addLayer(layerMapnik);
        layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
        map.addLayer(layerCycleMap);
        layerMarkers = new OpenLayers.Layer.Markers("Markers");
        map.addLayer(layerMarkers);

    var google_map_layer = new OpenLayers.Layer.Google(
        'Google Map Layer',
        {}
    );

    var google_hybrid_layer=new OpenLayers.Layer.Google(
        'Google Hybrid',
        {type:google.maps.MapTypeId.HYBRID}
    );

    map.addLayer(google_map_layer);
    map.addLayer(google_hybrid_layer);


        // Add the Layer with the GPX Track
        var lgpx = new OpenLayers.Layer.Vector("Kathmandu University", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "ku.gpx",
                format: new OpenLayers.Format.GPX()
            }),
            style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
            projection: new OpenLayers.Projection("EPSG:4326")
        });

        //Adding vector layer for editing

    var vector_layer=new OpenLayers.Layer.Vector(
        'Editable Vectors'
    );
    //add a vector editing control
    map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));


        map.addLayer(vector_layer);
        map.addLayer(lgpx);

        var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
        map.setCenter(lonLat, zoom);

        var size = new OpenLayers.Size(21, 25);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
        layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
    }
    popup= new OpenLayers.Popup("This is gps track",
                                    new OpenLayers.LonLat(85.5500,27.6167),
                                    new OpenLayers.Size(200,200),
                                    "Dhulikhel",
                                    true);
    map.addPopup(popup);
    alert("sorry no alert");
</script>
4

0 回答 0