Cách sử dụng API Google Maps trong tờ rơi-cloudmade

Question

Có cách nào để tích hợp Google Maps với tờ rơi-cloudmade không? Ý tôi là, tôi không muốn sử dụng bản đồ gốc được tạo bởi đám mây, nhưng tôi muốn sử dụng Google Maps thay thế. Tôi muốn hiển thị một bản đồ của Alaska (không có nhiều con đường ở đó). Nếu tôi sử dụng một bản đồ cloudmade, nó sẽ chỉ là màu trắng.

Đây là những gì tôi làm gì nếu tôi muốn sử dụng bản đồ cloudmade:

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

Tôi biết tôi nên thay đổi 'http: // {s} .tile.cloudmade.com/YOUR-API- KEY/997/256/{z}/{x}/{y} .png ' một phần. Nhưng, tôi nên viết gì nếu tôi muốn sử dụng bản đồ google (hoặc bất kỳ bản đồ nào khác)?

Đây là tài liệu hướng dẫn về việc tạo tờ rơi (họ không nói nhiều về việc sử dụng third-party map provider. Họ nói họ bất khả tri về nhà cung cấp bản đồ được sử dụng trong ứng dụng của chúng tôi, vì vậy tôi nghĩ rằng có thể sử dụng Google Maps) .

Answer 1

Google không cho phép bạn sử dụng ô của họ mà không sử dụng API của riêng họ để nhận chúng. Xem General Terms:

Đừng lạm dụng Dịch vụ của chúng tôi. Ví dụ: không ... cố gắng truy cập chúng bằng phương thức khác với giao diện và hướng dẫn mà chúng tôi cung cấp.

Bất cứ điều gì là thể, tất nhiên, vì vậy nó có thể làm cho gạch mà không có API, nhưng truy cập của bạn có thể bị chặn mà không cần cảnh báo:

Chúng tôi có thể tạm dừng hoặc ngừng cung cấp Dịch vụ của chúng tôi để nếu bạn không tuân thủ các điều khoản hoặc chính sách của chúng tôi hoặc nếu chúng tôi đang điều tra hành vi sai trái bị nghi ngờ.

Điều đó nói rằng, các Tờ rơi API không giống rất khác nhau từ các API của Google, do đó chuyển đổi sang sử dụng API của họ cũng có thể là đáng xem xét.

Answer 2

Có plugin của bên thứ ba cung cấp tích hợp Google Maps vào Leaflet để có thể thêm nó dưới dạng lớp: http://psha.org.ru/b/leaflet-plugins.html. Tuy nhiên, nó hoạt động như một proxy cho API Google Maps gốc v3, vì vậy nó không hoạt động trơn tru như các lớp trang tính Leaflet đơn giản và rất tiếc bạn không thể sử dụng các lát Google Maps trực tiếp do các hạn chế về Điều khoản sử dụng (như trong câu trả lời ở trên).

Answer 3

official leaflet.js plugins page tham chiếu gói Plugins by Pavel Shramov.
Google.js cung cấp cho bạn quyền truy cập vào các lát Google Maps bằng cách sử dụng API Google Maps v3, liên quan đến các điều khoản sử dụng.

Dưới đây là một ví dụ nhanh: bạn có thể sử dụng nó bằng cách đầu tiên thêm

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

và sau đó xây dựng bản đồ của bạn:

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

---

Lưu ý: cũng có một số dĩa đề cập trong this gist.

Answer 4

Nó không thực sự Google Maps, nhưng có một loạt các khác nhau cung cấp tờ rơi Map với mã số mẫu có sẵn tại http://leaflet-extras.github.io/leaflet-providers/preview/

Có lẽ bạn có thể tìm thấy một nhà cung cấp thích hợp cho vấn đề cụ thể của bạn ở đó. Như một lợi thế, bạn sẽ tránh được những vấn đề mà Andrew Leach đã chỉ ra. Dù sao - không phải là tôi mong đợi bạn không biết, nhưng tôi vẫn không muốn để lại điều này - xin lưu ý rằng một số (nhưng không phải tất cả) của các nhà cung cấp bản đồ là những người thương mại và do đó bạn có thể phải trả tiền cho dịch vụ hoặc có thể bận tâm về các TOS khác.

Answer 5

Từ this:

plugin for Debian này thiếu vấn đề này, nhưng không đáp ứng điều khoản dịch vụ của google (Oficial example).

Hoặc thử mã này:

var map = L.map('map').setView([ 51.505, -0.09 ], 13); 

L.tileLayer('//mt{s}.googleapis.com/vt?x={x}&y={y}&z={z}', 
{ 
    maxZoom: 18, 
    subdomains: [ 0, 1, 2, 3 ] 
}).addTo(map); 

var marker = L.marker([ 51.5, -0.09 ]).addTo(map);