从网上下载openlayers2，解压取得img theme 文件夹和openlayes.js文件。放在同一文件夹下用phpstorm打开。

创建index.html-------------每一行都有注释

<!DOCTYPE html>

<html lang='en'>

<head>

    <meta charset='utf-8'/>

    <title>My OpenLayers Map</title>

    <script type='text/javascript' src='OpenLayers.js'></script>//载入库文件

    <script type='text/javascript'>//js脚本，可以单独创建js文件，载入到html

        var map;//创建一个名为map的全局变量。

        function init() {

            map = new OpenLayers.Map('map_element', {});//从地图上创建一个映像对象类

            //第一个参数--map_element显示地图的html文件中的ID 　第二个参数是地图的选项

            var wms = new OpenLayers.Layer.WMS(//创建一个层对象映射到使用WMS层类的子类。

                    'OpenLayers WMS',//层的标题，在控制层列表增加可读性

                    'http://vmap0.tiles.osgeo.org/wms/vmap0',//URL是第二个参数,期望获得的WMS层类。

                    {layers: 'basic'},//键值对 返回"basic"层

                    {}

            );//WMS,代表网络地图服务　　一个国际标准定义的开放地理联盟(OGC)。

            map.addLayer(wms);//将图层添加到地图

            if (!map.getCenter()) {//定义地图的范围

                map.zoomToMaxExtent();//地图缩放地图的最大程度

                /**

                 * 其他控制大小的方法

                 * map.zoomToExtent(new OpenLayers.Bounds([minx,miny,maxx,maxy]);

                 *

                 * map.setCenter(new OpenLayers.LonLat(x,y));

                 * map.zoomTo(5);//x,y是经度/纬度值,5是你想放大的缩放级别。

                 *

                 */

            }

        }

    </script>

</head>

<body onload='init();'>

<div id='map_element' style='width: 500px; height: 500px;'>

</div>//为地图创建HTML元素

</body>

</html>

OpenLayers.2.10.Beginners.Guide---第一章的更多相关文章

  1. ASM学习笔记--ASM 4 user guide 第一章翻译

    ASM是什么? 借用别人的话 :ASM 是一个 Java 字节码操控框架.它能被用来动态生成类或者增强既有类的功能. ASM 可以直接产生二进制 class 文件,也可以在类被加载入 Java 虚拟机 ...

  2. 《驾驭Core Data》 第一章 Core Data概述

    <驾驭Core Data>系列教程综合了<Core Data for iOS>,<Learning Core Data for iOS>,<Core Data ...

  3. [ABP教程]第一章 创建服务端

    Web应用程序开发教程 - 第一章: 创建服务端 关于本教程 在本系列教程中, 你将构建一个名为 Acme.BookStore 的用于管理书籍及其作者列表的基于ABP的应用程序. 它是使用以下技术开发 ...

  4. 《Django By Example》第一章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...

  5. Nova PhoneGap框架 第一章 前言

    Nova PhoneGap Framework诞生于2012年11月,从第一个版本的发布到现在,这个框架经历了多个项目的考验.一直以来我们也持续更新这个框架,使其不断完善.到现在,这个框架已比较稳定了 ...

  6. 第一章 Java多线程技能

    1.初步了解"进程"."线程"."多线程" 说到多线程,大多都会联系到"进程"和"线程".那么这两者 ...

  7. 【读书笔记】《编程珠玑》第一章之位向量&位图

    此书的叙述模式是借由一个具体问题来引出的一系列算法,数据结构等等方面的技巧性策略.共分三篇,基础,性能,应用.每篇涵盖数章,章内案例都非常切实棘手,解说也生动有趣. 自个呢也是头一次接触编程技巧类的书 ...

  8. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  9. 第一章.C语言简介

    C语言第一章 C语言简介   目录 一.C语言介绍 二.C语言特点 三.Hello World 四.转义符 五.占位符 六.俄罗斯方块游戏 七.文件下载 一.C语言介绍 C是一种通用的编程语言,广泛用 ...

随机推荐

  1. BZOJ-2561-最小生成树 题解（最小割）

    2561: 最小生成树(题解) Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1628  Solved: 786 传送门:http://www.lyd ...

  2. js函数表达式和函数声明的区别

    我们已经知道,在任意代码片段外部添加包装函数,可以将内部的变量和函数定义"隐 藏"起来,外部作用域无法访问包装函数内部的任何内容. 例如: var a = 2; function ...

  3. bzoj 2141: 排队

    2141: 排队 Time Limit: 4 Sec Memory Limit: 259 MB Description 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我, ...

  4. jvascript 顺序查找和二分查找法

    第一种:顺序查找法 中心思想:和数组中的值逐个比对! /* * 参数说明: * array:传入数组 * findVal:传入需要查找的数 */ function Orderseach(array,f ...

  5. mybatis- spring 批量实现数据导入数据库

    终于实现了ibatis的批量插入,此方法插入3000条数据,比单条插入可以节省一半的时间XML代码: <insert id="insertBatch" parameterTy ...

  6. 【转】Python实现不同格式打印九九乘法表

    前言:最近在学习Python,学习资源有慕课网上的视频教程.菜鸟教程以及Python官方文档tutorial.虽然了解了Python的基本语法,但是还没有真正意义上输出自己写的代码.代码小白,之前仅学 ...

  7. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  8. github怎么退出组织和删除自己创建的组织

    1. 点击头像,进入settings 2. 点击左侧菜单中的 Organizations 切换到Origanizations后,右侧面板中会出现所有的oragnizations,我这里只有一个,是我自 ...

  9. 计算机常用dos命令

    一.简单的dos命令 win+R ------打开"运行"窗口 cmd ------回车进入"dos"命令窗口 ipconfig ------查看本机ip地址 ...

  10. node.js

    学习网址:http://www.jdon.com/idea/nodejs/