<!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在地图外放置控件的更多相关文章

  1. 百度地图API，展示地图和添加控件

    1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...

  2. OpenLayers 3 之 切换图层控件

    OpenLayers 3 之 切换图层控件 openlayers 3中并没有默认的图层切换控件,GitHub中有一个项目实现了我们需要的控件-------- ol3-layerswitcher . 可 ...

  3. Recyclerview点击事件，更新item的UI+更新Recyclerview外的控件

    项目中用到了Recyclerview,在第一行代码中学到了一种相对来说简单的点击事件方法,可是这种点击事件是在adapter中写的,没有教怎么更新item的ui和更新Recyclerview之外的控件 ...

  4. 百度地图隐藏缩放控件比例尺Logo

    对于百度地图最新版V3.7.3,以前的隐藏控件方法失效,可用以下方法隐藏: 1.隐藏缩放控件: mMapView.showZoomControls(false); 2.隐藏比例尺: mMapView. ...

  5. appium滚动查找屏幕外的控件

    嗯,还是把自己做的实验保存一下 Appium1.12.1+python2.7 实验滚动,查找屏幕外控件以及控制seekbar scroll() 是根据页面中两个元素位置之间的距离进行滑动. 滑动寻找屏 ...

  6. OpenLayers 3 的 图层控制控件

    openlayers3的control中没有提供默认的图层控制控件. 但是git上已经有造好的轮子,直接拿来用就可以了.地址 https://github.com/walkermatt/ol3-lay ...

  7. Google 地图 API V3 之控件

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  8. 【百度地图API】建立全国银行位置查询系统（二）——怎样为地图添加控件

    原文:[百度地图API]建立全国银行位置查询系统(二)--怎样为地图添加控件 <摘要>你将在第二章中学会以下知识: 使用手写代码的利器——notepad++: 如何为地图添加控件——鱼骨. ...

  9. 开源一款iOS中国地图行政区控件（含一级与二级行政区）

    开源一款iOS版中国省市级地图行政区的控件,该组件可以支持拖动.缩放以及全国省和市级行政区的点选,主要适用于iPad,如果要在iPhone上使用,一些细节可能得做相关调整. 该地图组件实现起来不难,数 ...

随机推荐

  1. Delphi XE10百集视频教程计划

    1. 前言 本人现在的职业是Java程序员,一直想学习一个做桌面应用的编程语言,几年前无意中接触到Delphi,比VB功能强大,比C++语法更容易理解,加上Oracle的PL/SQL的底子,最终决定学 ...

  2. Sql Server 2005主机和镜像切换SQL语句

    --1.主备互换 --主机执行: USE master; ALTER DATABASE <DatabaseName> SET PARTNER FAILOVER; --2.主服务器Down掉 ...

  3. Mac下使用Pecl安装PHP的Swoole扩展实践

    一.背景 前段时间把Mac系统重装了,PHP的一些扩展都没了,昨天需要调试一个swoole开发的项目,发现命令行中的PHP是系统自带的,如果安装swoole扩展很不方便:需要自己手动去下载swoole ...

  4. 【转载：java】详解java中的注解（Annotation）

    目录结构: contents structure [+] 什么是注解 为什么要使用注解 基本语法 4种基本元注解 重复注解 使用注解 运行时处理的注解 编译时处理的注解 1.什么是注解 用一个词就可以 ...

  5. JavaWEB过滤器和监听器技术

    过滤器介绍 什么是过滤器 生活中的例子: 滤水器,口罩,杯子上滤网,渔网 生活中的过滤器:留下我们想要的,排除,我们不想要的. 高考: 只有分数够高的同学才能进入理想的大学.有一部分同学被拦截在大学之 ...

  6. 装配SpringBean(六)--配置文件加载方式

    spring中的配置文件有两种: 以XML结尾的spring配置文件 以properties结尾的属性配置文件 在spring中有两种方式加载这两种文件: 通过注解+java配置的方式 通过XML的方 ...

  7. Spring Cloud Security&Eureka安全认证（Greenwich版本）

    Spring Cloud Security&Eureka安全认证(Greenwich版本) 一·安全 Spring Cloud支持多种安全认证方式,比如OAuth等.而默认是可以直接添加spr ...

  8. 《数据结构与算法分析——C语言描述》ADT实现(NO.00) : 链表(Linked-List)

    开始学习数据结构,使用的教材是机械工业出版社的<数据结构与算法分析——C语言描述>,计划将书中的ADT用C语言实现一遍,记录于此.下面是第一个最简单的结构——链表. 链表(Linked-L ...

  9. Web应用托管服务（Web+）隐藏的十个上云最佳姿势

    随着云计算浪潮的推进,技术架构云化已经成为大势所趋.特别是最近由CNCF推动的云原生概念,将符合云原生标准的各种开源技术方案推向了前所未有的高度.在这一波浪潮的推动下,越来越多的企业开始了自身的数字化 ...

  10. 循环读取文件夹中的图片matlab代码

    参考:http://blog.csdn.net/guoxiaojie_415/article/details/21317323:http://blog.csdn.net/qikaihuting/art ...