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

1.引用ol库

 

引用ol样式库

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

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

  (地图容器）

  (地图坐标容器)

3.使用标签，写js脚本

加载地图：

4.在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;
}

显示效果：