详细了解可去它的官网：http://openlayers.org/
简单使用，如展示一个块地图
<!doctype html><html lang="en"> ?<head> ???<!--引入openlayers的css--> ???<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css"> ???<style> ?????.mymap { ???????height: 400px; ???????width: 100%; ?????} ???</style> ???<!-- ???????如果在老的android平台及早期IE还需要在openlayers之前引入下面的js来兼容 ????????<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script> ???--> ???<!--引入openlayers的js--> ???<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script> ?</head> ?<body> ???<div id="mymap" class="mymap"></div> ???<script type="text/javascript"> ?????/* ???????创建openlayers中的一个map对象。并传递一个json对象来配置地图的一些参数。 ???????target中的值是document中块标签的id，用于显示地图的容器指定。 ???????layers：地图图层的配置，这里指定一个简单的块状地图图层。 ???????view：用于指地图显示的中心位置及缩放比例还旋转 ?????*/ ?????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([xxx, xxx]), ?????????zoom: 4 ???????}) ?????}); ???</script> ?</body></html>OpenLayers的使用---- 一个完全免费开源的地图JS库
原文地址：http://blog.51cto.com/quietnight/2171440