如何在 Leaflet 中加载谷歌地图基础层(2018 年 6 月之后)? [英] How to load a Google Maps baselayer in Leaflet (after june 2018)?

问题描述

我的网站上有一张使用 Google 卫星图像作为底图的传单地图.2018 年 6 月 11 日之后，如果没有 api 密钥，将无法访问谷歌地图图块.目前可以使用以下 javascript 通过 Leaflet JS 访问磁贴.

googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{最大缩放:20，子域:['mt0','mt1','mt2','mt3']});

2018 年 6 月 11 日之后，我将如何包含我的 api 密钥才能继续从 Leaflet 访问地图图块?

解决方案

仅通过指定 未记录 API 的 URL 从 Google 地图加载图块违反 Google 地图服务条款.让我引用他们的话:

<块引用>

10. 许可限制.

10.1 行政限制.

只能通过服务访问 API 或内容.除非通过服务，否则您将无法访问 Maps API 或内容.例如，您不得通过以下方式访问地图图块或图像接口或渠道(包括未记录的 Google 接口)除了 Maps API.

您还会注意到，磁贴 URL未记录在其 开发中文档(截至 2018 年 6 月初).

但是，您可以做的是为每个 Leaflet 实例加载一个 Google Map 实例，保持地图大小和中心同步，并使用突变观察器来监控 Google Map 实例加载一个图块，因此您可以将其从 Google Map DOM 树中撕下并放入 Leaflet DOM 树中(如果您只是使用棘手的 CSS 在 Google Maps 上显示 Leaflet，最终您会遇到有关同步缩放的问题两者的动画).

如果这听起来太吓人，请不要担心.Leaflet.GoogleMutant 为您完成所有繁重的工作.让我引用它的自述文件:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" 异步延迟></script><link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css"/><script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script><script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>

<小时>

var road = L.gridLayer.googleMutant({ type: 'roadmap' }).addTo(map);

请注意，您的 API 密钥有一个非常明显的位置(这是您的主要担心)，并且 GoogleMutant 只使用公共(和记录的)API(您也应该担心，因为它在 ToS 中).

I have a leaflet map in my website using Google satellite images as a base map. After June 11 2018, the google map tiles cant be accessed without an api key. The tiles can currently be accessed through Leaflet JS using the following javascript.

googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

How will I include my api key to be able to continue to access map tiles from Leaflet after June 11 2018?

解决方案

Loading tiles from Google Maps by just specifying the URL of an undocumented API is against the Google Maps terms of service. Let me quote from them:

10. License Restrictions.

10.1 Administrative Restrictions.

No access to APIs or Content except through the Service. You will not access the Maps API(s) or the Content except through the Service. For example, you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s).

You will also note that the tile URLs are not documented in their development documentation (as of early june 2018).

What you can do, however, is load one instance of a Google Map per instance of Leaflet, keep both map sizes and centers in sync, and use mutation observers to monitor whenever the Google Map instance loads a tile, so you can rip it off the Google Map DOM tree and put it in the Leaflet DOM tree (if you just use tricky CSS to show Leaflet on top of Google Maps, eventually you'll run into problems about syncing the zoom animations of both).

If this sounds too scary, don't worry. Leaflet.GoogleMutant does all the heavy lifting for you. Let me quote from its readme:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
<script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>

---

var roads = L.gridLayer.googleMutant({ type: 'roadmap' }).addTo(map);

Note that there's a perfectly obvious place for your API key (which is your main worry), and that GoogleMutant only uses the public (and documented) API (which you should worry about, too, since it's in the ToS).

这篇关于如何在 Leaflet 中加载谷歌地图基础层(2018 年 6 月之后)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！