使用OpenLayers3创建地图后获取地图的地理坐标coordinate

1.引用ol库

 <script src=”lib/ol-debug.js”></script>

引用ol样式库

<link href=”lib/ol/ol.css” rel=”stylesheet” />

***引用上面两个库，href属性根据具体两个库文件位置进行设置

2.使用HTML标签，创建容器

<div id=”mapCon”></div>  (地图容器）

<div id=”coordinate”></div>  (地图坐标容器)

3.使用<script></script>标签，写js脚本

加载地图：

<script>
      // 创建地图
      new ol.Map({
            // 设置地图图层
            layers: [
              // 创建一个使用Open Street Map地图源的瓦片图层
              new ol.layer.Tile({source: new ol.source.OSM()})
            ],
            // 设置显示地图的视图
            view: new ol.View({
              center: [0, 0],    // 定义地图显示中心于经度0度，纬度0度处
              zoom: 2            // 并且定义地图显示层级为2
            }),
            // 让id为map的div作为地图的容器
            target: 'map'    
        });
    </script>

4.在<script></script>zhong 添加OpenLayers3中MousePosition控件

//使用MousePosition控件，在地图上显示地图坐标
var coor = new ol.control.MousePosition({
    coordinateFormat: new ol.coordinate.createStringXY(2),
    projection: “EPSG:3857”,
    target: document.getElementById(‘coordinate’)
})
map.addControl(coor);

5.在css文件里设置坐标显示样式

#coordinate {
    width:130px;
    height: auto;
    position:fixed;
    bottom: 50px;
    right: 20px;
    z-index: 1;
}

显示效果：

转载自：https://blog.csdn.net/litong149/article/details/81429582