openlayers一：显示地图与鼠标地理坐标

openlayers两个好用的开源JS互动地图库之一，另一个是leaflet。

openlayers的特点是是大而全，自身包含绝大多数功能，文档好看。

leaflet是小而美，自身小，但支持扩展，好用扩展很多。

谷歌地图：

Google Maps​www.google.cn

从上面可以获取到谷歌地图瓦片图的连接为：

http://www.google.cn/maps/vt?lyrs=y@802&gl=cn&x={x}&y={y}&z={z}

那么要显示地图，只需：

 this.tileLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
          attributions: new ol.Attribution({
          html: '作者: 愤怒的小明'
          }),
          url: 'http://www.google.cn/maps/vt?lyrs=y@802&gl=cn&x={x}&y={y}&z={z}'
      })
 });
 this.map.addLayer(this.tileLayer);
 //地图默认是莫卡托投影，从经纬度转成莫卡托座标
 var center = ol.proj.fromLonLat([113.2569444444, 23.1336111111]);
 //设置地图中心
 var view = this.map.getView();
 view.setCenter(center);

鼠标漂浮显示当前位置：

 var mousePositionControl = new ol.control.MousePosition({
     coordinateFormat: ol.coordinate.createStringXY(6),
     projection: 'EPSG:4326',
     className: 'custom-mouse-position',
     target: document.getElementById('mouse-position'),
     undefinedHTML: '&nbsp'
 });
 this.map.addControl(mousePositionControl);

最终效果：

整体代码：

链接: https://pan.baidu.com/s/1WShiQh98EhtlNuw57jsEQA 密码: dfxz