OpenLayers很容易的在网站里放置动态地图。它能显示展开图及从资源中加载地图标记及矢量数据。它被开发出尽可能的使用所有的地图信息。并且它是完全免费及开源的.
详细了解可去它的官网：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>