谷歌地图中的Leaflet

Question

我们可以在谷歌地图中使用leaflet吗？通过搜索和阅读相关文章，我们发现有一些可用的leaflet插件，利用它们我们可以构建使用谷歌地图+leaflet的应用程序。

- Jeevan Roy dsouza

Answer 1

对于静态地图，您可以自由地在叶片中添加Google地图瓦片。您无需添加第三方插件和Google API。对于静态瓦片，您可以添加以下代码， 街景：

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

混合的,

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

卫星，

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

地形

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

请注意URL中“lyrs”参数的差异：

Hybrid: s,h;
Satellite: s;
Streets: m;
Terrain: p;

- Tek Kshetri

---

这也对我很有帮助，谢谢。但我仍然有疑问：这符合Google地图的服务条款吗？它可以完全自由使用吗？ - robcsi

为什么要使用GoogleMutant，当你可以做这个看起来更容易的事情呢？ - gap

回答了自己的问题：https://stackoverflow.com/questions/40992859/use-3d-view-google-map-in-leaflet-plugin - gap

@robcsi 不，这不符合Google Maps的服务条款，因为您没有使用Google Maps API。 - user276648

Answer 2

需要明确一点：Leaflet仅是一个视图库，而Google Maps既提供基础地图（瓦片），还提供API（类似于Leaflet）。

使用Google Maps的基础地图时，要求您专门使用其API。

然而，确实有一个名为Leaflet插件的插件声称可以充当Google Maps API的代理，因此符合其使用条款。所以，答案是肯定的。

接下来就是决定使用带有该插件的Leaflet还是直接使用Google Maps API。此时这更像是一个问题，即哪一个能为您提供所需的功能。

---

更新

最初提到的插件已不再维护。

以下是一个较新的插件：Leaflet.GridLayer.GoogleMutant

- ghybs

Answer 3

您可以使用leaflet JS API工具包，并在其中使用谷歌地图的影像。

编辑：

请查看此示例，其中使用了谷歌瓦片/影像和leaflet工具包。

var map = new L.Map(
  'map', 
  {
    center: new L.LatLng(51.51, -0.11), 
    zoom: 9
  }
);

var googleLayer = new L.Google('ROADMAP');

map.addLayer(googleLayer);

#map {
  height: 500px;
  width: 500px;
}

<script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>

<div id="map"></div>

Source: https://gist.github.com/crofty/2197701

- anand

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。 - Lance

@Lance 谢谢分享，我已经更新了答案，并将来记住这一点。 - anand

无法工作，它不是 leaflet JS API 的一部分，而是一个插件。 - Rantiev