<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在地图外放置控件</title>
<link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />
<script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>
<style>
.olControlNavToolbar {
top: 0px;
left: 0px;
float: left;
}
.olControlNavToolbar div {
float: left;
}
</style>
<script type="text/javascript">
function init(){
// Create map
var map = new OpenLayers.Map("control_outside");
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
var mousePosition = new OpenLayers.Control.MousePosition({
div: document.getElementById(‘mouseposition‘)
});
map.addControl(mousePosition);
var navToolbarControl = new OpenLayers.Control.NavToolbar({
div: document.getElementById("navigation")
});
map.addControl(navToolbarControl);
}
</script>
</head>
<body onload="init()">
<table>
<tr>
<td>
Navigation: <div id="navigation" class="olControlNavToolbar"></div>
</td>
<td>
Position: <div id="mouseposition" style="font-size: smaller;"></div>
</td>
</tr>
</table>
<div id="control_outside" style="width: 100%; height: 90%;"></div>
</body>
</html>
原文地址：https://www.cnblogs.com/Jeely/p/11175678.html
时间： 2024-10-10 17:47:28