写在前面：
1.参考自谷歌地图TMS地图服务地址收集，测试可用_谷歌地图url订阅订阅地址-CSDN博客，在这里备份一下，防止遗忘
2.需要翻墙
3.下面通过openlayers加载各风格地图
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers地图示例</title>
<link href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js" charset="utf-8"></script>
<style>
#map {
height: 800px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var googleMap = new ol.layer.Tile({
source: new ol.source.XYZ({
// 1.矢量地图+注记
// url: 'http://www.google.cn/maps/vt?lyrs=r@189&gl=cn&x={x}&y={y}&z={z}'
// 2.矢量地图+注记+地形
// url: 'http://www.google.cn/maps/vt?lyrs=p@189&gl=cn&x={x}&y={y}&z={z}'
// 3.栅格地图
// url: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
// 4.栅格地图+注记
// url: 'http://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}'
})
});
// 创建地图
var map = new ol.Map({
layers: [
googleMap
],
view: new ol.View({
// 设置成都为地图中心
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10
}),
target: 'map'
});
</script>
</body>
1.矢量地图+注记
网址:http://www.google.cn/maps/vt?lyrs=r@189&l-=cn&x={x}&y={y}&z={z}
2. 矢量地图+注记+地形
网址:http://www.google.cn/maps/vt?lyrs=p@189&l-=cn&x={x}&y={y}&z={z}
3. 栅格地图+无注记
网址: http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}
4. 栅格地图+注记
网址:http://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}
5.注记语言选择
上述网址默认注记是中英文双语，如果只想显示中文注记，那在网址中添加hl=zh-CN，
例如：http://www.google.cn/maps/vt?lyrs=y@189&gl=cn&hl=zh-CN&x={x}&y={y}&z={z}
