如何在Leaflet中加载Google Maps基础层(2018年6月之后)？

Question

我的网站上有一张传单地图,使用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的地图图块？

Answer 1

只需指定未记录的 API 的网址,即可从Google地图加载图块,这违反了Google地图服务条款.让我引用他们的话:

10. 许可限制.

10.1行政限制.

除通过服务外,无法访问API或内容.除非通过服务,否则您不会访问Maps API或内容.例如,您不得通过Maps API之外的接口或通道(包括未记录的Google界面)访问地图图块或图像.

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

但是,您可以执行的操作是为每个Leaflet实例加载一个Google Map实例,同时保持地图大小和中心同步,并使用变异观察器监控Google Map实例加载磁贴的时间,以便您可以将其删除谷歌地图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中).