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、运行