mapbox加载谷歌地图

最新推荐文章于 2024-12-22 21:51:29 发布

Cenergy

最新推荐文章于 2024-12-22 21:51:29 发布

阅读量2.6k

点赞数 1

分类专栏： javascript webgis mapbox

本文链接：https://blog.youkuaiyun.com/qq_36264495/article/details/99570725

版权

javascript 同时被 3 个专栏收录

19 篇文章

订阅专栏

webgis

4 篇文章

订阅专栏

mapbox

4 篇文章

订阅专栏

mapbox加载谷歌地图，accessToken都不用加的，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
     <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/mapbox-gl/1.2.1/mapbox-gl.js"></script>
    <link
      href="https://cdn.bootcss.com/mapbox-gl/1.2.1/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>

    <script>
      var map = new mapboxgl.Map({
        container: "container",
        style: {
          version: 8,
          sources: {},
          layers: []
        },
        center: [112, 37.94],
        zoom: 2
      });
      map.on("load", function() {
        map.addSource("google.tile", {
          type: "raster",
          tiles: [
            "https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
          ],
          tileSize: 256
        });
        map.addLayer({
          id: "google",
          type: "raster",
          source: "google.tile"
        });
      });
    </script>
  </body>
</html>