google-maps - 如何在leaflet-cloudmade中使用Google Maps API

Question

有没有办法将 Google map 与 leaflet-cloudmade 集成？我的意思是，我不想使用原来的cloudmade map ，但我想使用Google map 。我想显示阿拉斯加的 map (那里的道路不多)。如果我使用云制作的 map ，它只是白色的。

如果我想使用cloudmade map ，这就是我要做的:

var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
});

我知道我应该更改'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png ' 部分。但是，如果我想使用谷歌地图(或任何其他 map )，我应该在那里写什么？

这是 leaflet-cloudmade 的文档(他们没有说太多关于使用 third-party map provider 的内容。他们说他们对我们应用程序中使用的 map 提供程序不可知，所以我认为应该可以使用 Google map )。

Answer 1

official leaflet.js plugins page引用Plugins by Pavel Shramov包。
提供的Google.js 允许您根据使用条款使用 Google Maps API v3 访问 Google map 图 block 。

这是一个简单的示例:您可以通过首先添加

来使用它

<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="path/to/Google.js"></script>

然后构建你的 map :

var map = new L.Map('map', {center: new L.LatLng(43.6481, -79.4042), zoom: 13});
var gmap_layer = new L.Google('ROADMAP');
map.addLayer(gmap_layer);

<小时/>

注意: this gist 中还提到了一些 fork .