首页 > 其他 > 详细

OpenLayers学习记录(1)

时间:2014-01-17 00:33:53      阅读:430      评论:0      收藏:0      [点我收藏+]

1、部署自己的服务器

首先下载openlayers的源码。解压后里面有很多内容。我们只需要拷贝目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录 theme目录 到你网站的olapi目录下。
当然你也可以是使用OpenLayers中文官方站的api   http://www.openlayers.cn/olapi/OpenLayers.js

 2、创建一个 空的index.html文件
包含以下的代码:

bubuko.com,布布扣
<!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("rcp1_map");
// 创建一个 OpenStreeMap raster layer
// 把这个图层添加到map中
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
// 设定视图缩放地图程度为最大
map.zoomToMaxExtent();
}
</script>
</head>

<body onload="init()">
<div id="rcp1_map" style="width: 100%;
height: 100%;">
</div>
</body>

</html>
bubuko.com,布布扣

 

3、运行

 

OpenLayers学习记录(1)

原文:http://www.cnblogs.com/marost/p/3522540.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!