Php 如何将openlayers映射精确地放入自定义div标记中?
我不熟悉web映射,并尝试使用一些代码将openlayers映射包含到div中,其中包括来自php的openlayers代码。它将显示div,但地图将沿着地图向下移动。如何更正我的代码?php包含在map div中Php 如何将openlayers映射精确地放入自定义div标记中?,php,html,css,openlayers,Php,Html,Css,Openlayers,我不熟悉web映射,并尝试使用一些代码将openlayers映射包含到div中,其中包括来自php的openlayers代码。它将显示div,但地图将沿着地图向下移动。如何更正我的代码?php包含在map div中 <?php include_once("gps_track.php") ; ?> #map{ clear:both; float:left; border:3p
<?php include_once("gps_track.php") ; ?>
#map{
clear:both;
float:left;
border:3px solid #330066;
height:500px;
width:70%;
}
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>
我应该为css使用openlayes中的额外div吗
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>
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>
你的问题我不太清楚,你没有展示初始化OpenLayers的javascript代码。如果使用var map=new OpenLayers.map'map';初始化OpenLayers;,id映射为的div将被映射填充。因此,您应该只使用CSS来设置保存映射的div的正确大小,并且映射将具有相同的大小。如果这不是你问题的答案,也许你可以添加一个jsfiddle jsfiddle.net来澄清你的问题。我现在已经附加了openlayers代码,并保存在.php中。当我在索引页上加载函数init时,它运行良好,并在我的map div中进行了调整。但是这些问题中的错误原因是什么,以便我将来会注意到。我看不到您在哪里调用init函数。如果您想说清楚,请将您的代码放在jsfiddle.net中,并在关于这个问题的新评论中发布您的小提琴的url。