效果：
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="lib/ol.css" /> <script type="text/javascript" src="lib/ol.js"></script> <style type="text/css"> .map{width: 600px;height: 400px;} </style> </head> <body> <div id="map" class="map"></div> </body> </html> <script type="text/javascript"> //Map 是openlayers得核心组件，要渲染地图，必须需要view(视图),layers(图层),target(容器) //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ center: [0, 0],//义地图显示中心于经度0度，纬度0度处 zoom: 1 //定义地图显示层级为1 }), //创建地图图层 layers: [ //创建一个使用Open Street Map地图源的瓦片图层 new ol.layer.Tile({ source: new ol.source.OSM() }) ], //让id为map的div作为地图的容器 target: ‘map‘ }); </script>
原文：https://www.cnblogs.com/MaShuai666/p/12466411.html