Leaflet in google maps | 易学教程

问题

Can we use leaflet in google maps? Searching and reading articles about it, we found that there are some leaflet plugins available. Using that we can build application using google map + leaflet.

回答1:

Just to be clear: Leaflet is just a viewing library, whereas Google Maps provides both the base maps (tiles) and an API (like Leaflet).

Google Maps requires that you use exclusively its API when using its base maps.

However, there is indeed a plugin for Leaflet that claims to act as a proxy for the Google Maps API, hence respecting its Terms of Use, so YES it sounds do-able.

Then you are left with the decision of using Leaflet with that plugin or directly using Google Maps API. At this point this sounds more like a question of which one provides you with the features you are looking for.

Update

The originally mentioned plugin is no longer maintained.

Here is a more recent one: Leaflet.GridLayer.GoogleMutant

回答2:

You can use leaflet JS API kit and use google maps imagery in it.

Edit:

Check this example in which google tiles/imagery is used along leaflet kit.

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

回答3:

For the static purpose you can freely add the google map tiles inside your leaflet. You doesn't need to add the third party plugin and google API. For the static tiles, you can add following code, for street,

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

Hybrid,

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

satellite,

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

Terrain

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

Note that difference in the "lyrs" parameter in the URL:

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

来源：https://stackoverflow.com/questions/33343881/leaflet-in-google-maps

标签

google-maps

leaflet

mapbox