google-maps - getlatlng - leaflet popup

Cómo utilizar la API de Google Maps en leaflet-cloudmade

Question

¿Hay alguna manera de integrar Google Maps con leaflet-cloudmade? Quiero decir, no quiero usar el mapa original hecho en la nube, pero quiero usar Google Maps en su lugar. Quiero mostrar un mapa de Alaska (no hay muchas carreteras allí). Si uso un mapa hecho en la nube, sería solo blanco.

Esto es lo que hago si quiero usar el mapa hecho en la nube:

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

Sé que debo cambiar la parte ''http: // {s} .tile.cloudmade.com / YOUR-API-KEY / 997/256 / {z} / {x} / {y} .png'' . Pero, ¿qué debo escribir allí si quiero usar google map (o cualquier otro mapa)?

Esta es la documentación de leaflet-cloudmade (no dicen mucho sobre el uso de un proveedor de mapas de terceros . Dicen que son agnósticos sobre el proveedor de mapas que se utiliza en nuestra aplicación, por lo que creo que debería ser posible utilizar Google Maps) .

Answer 1

De this :

Este complemento para Debian carece de este problema, pero no cumple con los términos de servicio de google ( ejemplo oficial ).

O prueba este código:

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

Answer 2

En realidad no es Google Maps, pero hay una gran variedad de proveedores de mapas LeafLet diferentes con códigos de muestra disponibles en http://leaflet-extras.github.io/leaflet-providers/preview/

Tal vez usted pueda encontrar un proveedor apropiado para su problema específico allí. Como un punto a favor, evitará los problemas señalados por Andrew Leach. De todos modos, no esperaba que no lo supiera, pero aún así no quiero dejar de lado esto. Tenga en cuenta que algunos (pero no todos) de los proveedores de mapas son comerciales y, por lo tanto, es posible que deba pagar el servicio. o podría molestarse en otras TOSes.

Answer 3

Google no te permite usar sus mosaicos sin usar su propia API para obtenerlos. Consulte los Términos Generales :

No haga mal uso de nuestros servicios. Por ejemplo, no ... intente acceder a ellos utilizando un método que no sea la interfaz y las instrucciones que proporcionamos.

Por supuesto, todo es posible , por lo que es posible obtener los mosaicos sin la API, pero su acceso puede estar bloqueado sin previo aviso:

Podemos suspender o dejar de proporcionarle nuestros Servicios si no cumple con nuestros términos o políticas o si estamos investigando una conducta sospechosa.

Dicho esto, la API del Folleto no se ve muy diferente de la API de Google, por lo que la conversión para utilizar su API puede valer la pena considerarla.

Answer 4

Hay un complemento de terceros que proporciona la integración de Google Maps en Leaflet para poder agregarlo como una capa: http://psha.org.ru/b/leaflet-plugins.html . Sin embargo, actúa como un proxy para la API original de Google Maps v3, por lo que no funciona tan bien como las capas de mosaico del Folleto simple, y desafortunadamente no puede usar los mosaicos de Google Maps directamente debido a las restricciones de los Términos de uso (como en la respuesta encima).

Answer 5

La página oficial de plugins leaflet.js hace referencia al paquete Plugins by Pavel Shramov .
El Google.js proporcionado Google.js brinda acceso a los mosaicos de Google Maps mediante el uso de la API de Google Maps v3, con respecto a los términos de uso.

Aquí hay un ejemplo rápido: puede usarlo agregando primero

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

y luego construir su mapa:

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

Nota: también hay algunos tenedores mencionados en esta esencia .