直接上代码:
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>OpenLayers 地图示例</title>
<link href="../css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../src/js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script>
// 创建地图
new ol.Map({
// 设置地图图层
layers: [
// 创建一个使用Open Street Map地图源的瓦片图层
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
// 设置显示地图的视图
view: new ol.View({
center: ol.proj.fromLonLat([113.41, 29.58]), // 定义地图显示中心
zoom: 6 // 并且定义地图显示层级为6
}),
// 让id为map的div作为地图的容器
target: 'map'
});
</script>
</body>
</html>