OpenLayers学习记录(1)

1、部署自己的服务器

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

 2、创建一个 空的index.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("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=" 100%;
height: 100%;">
</div>
</body>

</html>

 

3、运行

 

原文地址:https://www.cnblogs.com/marost/p/3522540.html