如何在 Leaflet 中加载 Google Maps 底图层（2018年6月之后）？

Question

我网站上有一个叶子let地图，使用Google卫星图像作为底图。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']
});

2018年6月11日之后，我应该如何包含我的API密钥以继续访问Leaflet的地图瓦片？

- Ashley Goldstraw

---

这个GIS论坛上的问题可能会有所帮助：https://gis.stackexchange.com/questions/228162/giving-google-api-key-in-google-street-map-used-by-leaflet-map/228163 - peeebeee

该死，我错过了那个重复的问题。也许我应该将我的答案复制粘贴到那里，并投票关闭这个问题？ - IvanSanchez

Answer 1

仅仅通过指定一个未经记录的API的URL来从Google地图加载瓦片是违反Google地图服务条款的。让我引用一下它们的内容：

10. 许可限制。

10.1 行政限制。

除了通过服务以外，您不会访问Maps API(s)或内容。 您不得通过接口或渠道（包括未记录的谷歌接口）以外的方式访问地图瓦片或图像等内容。

您还会注意到瓦片的URL在他们的开发文档中没有记录（截至2018年6月初）。

然而，您可以为每个Leaflet实例加载一个Google地图实例，并保持两个地图的大小和中心点同步，并使用变异观察器监视Google地图实例何时加载瓦片，这样您就可以将其从Google地图DOM树上剥离并放入Leaflet DOM树中（如果您只是使用巧妙的CSS将Leaflet显示在Google地图之上，最终您将遇到有关同步两者缩放动画的问题）。

如果这听起来太可怕，请不要担心。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（您也应该关注它，因为它在服务条款中）。

- IvanSanchez

---

Google Mutant有时会留下灰色瓷砖（地图未铺设的部分），是否有希望在未来解决这个问题？ - Aleksey Kuznetsov

Answer 2

如果您需要将所有瓷砖存储在本地数据库中以备将来使用，可以尝试使用这个软件：

Maptorium

- oleggoodzon