谷歌地图服务地址汇总

最新推荐文章于 2025-03-25 17:25:56 发布

wenjing:)

最新推荐文章于 2025-03-25 17:25:56 发布

阅读量1.2k

点赞数 5

文章标签： openlayers Google地图

本文链接：https://blog.csdn.net/weixin_43336525/article/details/142798562

版权

写在前面：

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>