OpenLayers在地图外放置控件

最新推荐文章于 2021-10-08 16:35:06 发布

weixin_30522183

最新推荐文章于 2021-10-08 16:35:06 发布

阅读量112

点赞数

原文链接：http://www.cnblogs.com/Jeely/p/11175678.html

版权

<!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

weixin_30522183

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>在地图外...
复制链接

扫一扫