OpenLayers Demo

来源：互联网发布：java运行环境变量配置编辑：程序博客网时间：2024/04/28 16:17

在地图上放置一张地图

<!doctype html><html lang="en">  <head>    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.2/css/ol.css" type="text/css">    <style>      .map {        height: 400px;        width: 100%;      }    </style>    <script src="https://openlayers.org/en/v4.6.2/build/ol.js" type="text/javascript"></script>    <title>OpenLayers example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div>    <script type="text/javascript">      var map = new ol.Map({        target: 'map',        layers: [          new ol.layer.Tile({            source: new ol.source.OSM()          })        ],        view: new ol.View({          center: ol.proj.fromLonLat([114.3,30.60]),          zoom: 4        })      });    </script>  </body></html>

要包含一个网页的地图，你将需要3件事情：

包括OpenLayers
<div> 地图容器
JavaScript来创建一个简单的地图

包括OpenLayers

  <script src="https://openlayers.org/en/v4.6.2/build/ol.js" type="text/javascript"></script>

`<div>` 包含地图

  <div id="map" class="map"></div>

应用程序中的地图包含在<div>HTML元素中。通过这个<div>，可以通过CSS控制宽度，高度和边界等地图属性。这里是CSS元素，用于使地图高400像素和浏览器窗口一样宽。

  <style>    .map {      height: 400px;      width: 100%;    }  </style>

JavaScript来创建一个简单的地图

  var map = new ol.Map({    target: 'map',    layers: [      new ol.layer.Tile({        source: new ol.source.OSM()      })    ],    view: new ol.View({      center: ol.proj.fromLonLat([114.3,30.60]),      zoom: 4    })   });

阅读全文

0 0

OpenLayers Demo

包括OpenLayers

<div> 包含地图

JavaScript来创建一个简单的地图

`<div>` 包含地图