OpenLayers 学习(一)创建一个简单的电子地图

因项目需要,学习研究基于Openlays开发地图技术。

入门第一步,先创建一个简单的电子地图:

调用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>

浏览器打开后展示效果:

转载自:https://blog.csdn.net/Stonesk/article/details/50906088

You may also like...