之前項目中一直使用高德地圖作為底圖，但高德地圖影像圖只限於城市地區，所以決定替換為谷歌地圖。其實一直以為谷歌地圖不能訪問，不知道有沒有像我一樣懶的小伙伴……
加載谷歌地圖的地址總結如下：
谷歌交通地圖地址：http://www.google.cn/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：http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}，
影像圖地址：http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}，
影像注記層地址：http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}，
地形圖層：http://www.google.cn/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}
第二個平面圖會出現注記有英文的情況，如下圖所示，所以使用谷歌交通圖比較好。
查詢谷歌地圖的加載，參考了以下博客：
http://blog.csdn.net/smilecoffin/article/details/72863967，谷歌交通地圖地址來源於此，特地打開谷歌地圖對比，卻找不到這樣的地址；影像圖的地址可以找到。
另外參考leaflet.ChineseTmsProviders插件（詳見博客http://blog.csdn.net/GISuuser/article/details/77600052）和http://www.360doc.com/content/14/0917/16/7931690_410213814.shtml 得知lyrs=后面的參數，h代表注記層，s代表影像層，m代表平面圖層，t代表地形圖層。
測試代碼如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/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:'http://www.google.cn/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}' // url: 'http://www.google.cn/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:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&x={x}&y={y}&z={z}' // url:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}' // url:'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}' // url:'http://www.google.cn/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>