之前项目中一直使用高德地图作为底图，但高德地图影像图只限于城市地区并且有坐标偏移，所以决定替换为谷歌地图。其实一直以为谷歌地图不能访问，不知道有没有像我一样懒的小伙伴……
加载谷歌地图的地址总结如下：
谷歌交通地图地址：/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0，
平面图地址2：/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}，
影像图地址：/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}，
影像注记层地址：/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}，
地形图层：/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}
第二个平面图会出现注记有英文的情况，如下图所示，所以使用谷歌交通图比较好。
查询谷歌地图的加载，参考了以下博客：
/smilecoffin/article/details/72863967，谷歌交通地图地址来源于此，特地打开谷歌地图对比，却找不到这样的地址；影像图的地址可以找到。
另外参考leaflet.ChineseTmsProviders插件（详见博客/GISuuser/article/details/77600052）和/content/14/0917/16/7931690_410213814.shtml得知lyrs=后面的参数，h代表注记层，s代表影像层，m代表平面图层，t代表地形图层。
测试代码如下：
<!DOCTYPE html> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/lib/ol.js"></script> <link rel="stylesheet" href="css/ol.css" type="text/css"><script type="text/javascript"> window.onload = function () { var googleMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url:'/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}'// url: '/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'// url:'/maps/vt?lyrs=s@773&gl=cn&x={x}&y={y}&z={z}'//url:'/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'//url:'/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'//url:'/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'})}); var map = new ol.Map({ layers: [googleMapLayer], view: new ol.View({ center: [106.51, 29.55], projection: 'EPSG:4326', zoom: 10 }), target: 'map' }); }; </script> </head> <body> <div id="map"></div> </body> </html>
