OpenLayers3实现鼠标移动显示坐标

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>鼠标移动显示坐标信息</title>
 <link rel="stylesheet" href="css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/ol.css" >
 <link rel="stylesheet" href="css/ZoomSlider.css" >
 <script src="js/ol.js"></script>
 <script src="js/MousePosition.js"></script>
 <style>
 #map {
  width: 100%;
  height: 100%;
  position: absolute;
 }

 #mouse-position {
  float: left;
  position: absolute;
  bottom: 5px;
  width: 200px;
  height: 20px;
  /* 将z-index设置为显示在地图上层 */
  z-index: 2000;
 }
 /* 显示鼠标信息的自定义样式设置 */

 .custom-mouse-position {
  color: red;
  font-size: 16px;
  font-family: "微软雅黑";
 }
 </style>
</head>

<body onload="init()">
 <div id="map">
 <div id="mouse-position"></div>
 </div>
</body>

</html>

function init() {
 // 实例化鼠标位置控件
 var mousePositionControl = new ol.control.MousePosition({
 coordinateFormat: ol.coordinate.createStringXY(4), //坐标格式
 projection: 'EPSG:4326', //地图投影坐标系
 className: 'custom-mouse-position', //坐标信息显示样式
 // 显示鼠标位置信息的目标容器
 target: document.getElementById('mouse-position'),
 undefinedHTML: '&nbsp' //未定义坐标的标记
 });


 // 实例化Map对象加载地图
 var map = new ol.Map({
 target: 'map', //地图容器div的id
 layers: [ //地图容器加载的图层
  new ol.layer.Tile({ //加载瓦片图层数据
  source: new ol.source.OSM() //数据源，加载OSM数据
  })
 ],
 view: new ol.View({
  center: [102, 35],
  zoom: 3
 }),
 // 加载控件到地图容器中
 // 加载鼠标位置控件
 controls: ol.control.defaults().extend([mousePositionControl])
 });
}