OpenLayers在地图外放置控件
Posted jeely
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了OpenLayers在地图外放置控件相关的知识,希望对你有一定的参考价值。
<!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>
以上是关于OpenLayers在地图外放置控件的主要内容,如果未能解决你的问题,请参考以下文章
openlayers2地图控件扩展:图例控件LegendControl