如何在传单中加载谷歌地图基础图层(2018 年 6 月之后)?

Question

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

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

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

Answer 1

仅通过指定未记录的 API 的 URL 即可从 Google 地图加载磁贴，这违反了 Google 地图服务条款。让我引用他们的话：

10. 许可证限制。

10.1 行政限制。

除非通过服务，否则不得访问 API 或内容。除非通过服务，否则您将无法访问地图 API 或内容。 例如，不得通过以下方式访问地图切片或影像 接口或频道(包括未记录的谷歌界面( 地图 API 除外。

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

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

如果这听起来太可怕，请不要担心。Leaflet.GoogleMutant为您完成所有繁重的工作。让我引用其自述文件：

<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);

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