从网上下载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>