从网上下载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. c# ip内外网判断

    /// <summary> /// 判断IP地址是否为内网IP地址 /// </summary> /// <param name="ipAddress" ...

  2. Genymotion安装问题

    今天安装虚拟机各种报错,网上收了各种资料,然而并不能解决问题.啥也没干整整一天总算找到解决方案解决.     解决方法︰ 删除所有以前的虚拟框适配器 转到设备管理器中,单击"操作" ...

  3. Oracle的一些操作

    . 创建用户 Create user 用户名 identified by "密码"; 例如:create user ghc_ez identified by "ghc_2 ...

  4. c#上级目录

    本文实例讲述了C#的path.GetFullPath 获取上级目录实现方法,分享给大家供大家参考.具体实现方法如下: string path = new directoryinfo("../ ...

  5. POJ 2253 Frogger（Dijkstra)

    传送门 Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 39453   Accepted: 12691 Des ...

  6. sdk开发时,对外暴露的接口封装

    思考,用同步还是异步? 实质就是屏蔽一些东西,让使用者直接传参数 拿结果 而不用关心具体实现 eg.登陆接口 1.定义接口LoginCallBack,两个函数 请求成功和失败 public inter ...

  7. RabbitMQ学习系列（一）: 介绍

    1. 介绍 RabbitMQ是一个由erlang开发的基于AMQP(Advanced Message Queue )协议的开源实现.用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面都非 ...

  8. Java BigDecimal 转换，除法陷阱（转）

    源地址:   http://blog.csdn.net/niannian_315/article/details/24354251 今天在用BigDecimal“出现费解”现象,以前虽然知道要避免用, ...

  9. [从产品角度学EXCEL 02]-EXCEL里的树形结构

    这是<从产品角度学EXCEL>系列第三篇. 前言请看: 0 为什么要关注EXCEL的本质 1 excel是怎样运作的 或者你可以去微信公众号@尾巴说数 获得连载目录. 本文仅由尾巴本人发布 ...

  10. Eclipse 中文的设置

    步骤如下:一.下载:在Eclipse官网下载相应版本的中文包. 二.中文包安装:1.解压中文语言包中的两个文件夹至Eclipse文件夹的dropins文件夹中.(目录不要放错)2.安装:方法一:使用命 ...