OpenLayers 学习(一)创建一个简单的电子地图
2016-03-16 16:19
519 查看
因项目需要,学习研究基于Openlays开发地图技术。
入门第一步,先创建一个简单的电子地图:
调用OpenLayers中文官方站的api http://www.openlayers.cn/olapi/OpenLayers.js
新建test.html
页面代码为:
浏览器打开后展示效果:
入门第一步,先创建一个简单的电子地图:
调用OpenLayers中文官方站的api http://www.openlayers.cn/olapi/OpenLayers.js
新建test.html
页面代码为:
<!DOCTYPE html> <html> <head> <title> 创建一个简单的电子地图 </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <!-- 加载OpenLayers 类库 --> <script type="text/javascript" src="http://www.openlayers.cn/olapi/OpenLayers.js"> </script> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } </style> <script type="text/javascript"> function init() { // 使用指定的文档元素创建地图 var map = new OpenLayers.Map("test_map"); // 创建一个 OpenStreeMap raster layer // 把这个图层添加到map中 var osm = new OpenLayers.Layer.OSM(); map.addLayer(osm); // 设定视图缩放地图程度为最大 map.zoomToMaxExtent(); } </script> </head> <body onload="init()"> <div id="test_map" style="width: 100%; height: 100%;"> </div> </body> </html>
浏览器打开后展示效果:
相关文章推荐
- SQOOP可能会导致HDFS分片数量过多的总结
- 树莓派3 CentOS7 下载 Raspberry Pi Model 3 B
- 网易公开课《Linux内核分析》学习心得-使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
- hadoop2.4.1源码在64位系统编译过程中遇到的几个错误及解决方法
- Linux sed指令
- Linux同步工具:rsync
- Nginx分发高级配置
- 《高性能网站建设指南》读后感
- linux终端下查看当前操作系统版本信息
- Hadoop数据压缩
- apache2.2下编译安装php5.6
- Arch Linux安装中文输入法
- 浅谈WebLogic和Tomcat
- linux(centos)搭建SVN服务器
- Linux Shell特殊字符和控制字符大全
- Linux内存管理误区问答总结
- 未安装nginx输入ip直接访问工程
- Linux内核Crash分析
- Linux笔记(47)——shell运算符
- linux 进程的虚拟地址和内核中的虚拟地址有什么关系