OpenLayers 学习（一）创建一个简单的电子地图

最新推荐文章于 2025-08-03 16:06:34 发布

转载最新推荐文章于 2025-08-03 16:06:34 发布 · 1.4k 阅读

文章标签：

#地图

openlayers学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用OpenLayers创建一个简单的在线地图应用。通过调用OpenLayers API，设置HTML页面并运用JavaScript实现地图初始化及显示。文章详细展示了创建过程中的代码配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因项目需要，学习研究基于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>

浏览器打开后展示效果：