Leaflet Map API with Google Satellite Layer

和自甴很熟 提交于 2019-11-27 10:29:54

Leaflet has an official page for publishing all available plugins: http://leafletjs.com/plugins.html

You will find plugins there for adding Google layers support to Leaflet.

You don't need a plugin or the Google API, you can add it as a XYZ tile layer.

Streets

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 the difference in the "lyrs" parameter in the URL:
Hybrid: s,h;
Satellite: s;
Streets: m;
Terrain: p;

There's a third-party plugin for it: Demo: http://psha.org.ru/leaflet/bel.html (switch to Google Maps with the switcher) Source: http://psha.org.ru/leaflet/Google.js

this repository contains few tile layers google and other and very useful other plugins: https://github.com/shramov/leaflet-plugins

Google title layer with Traffic

var googleTraffic = L.tileLayer('https://{s}.google.com/vt/lyrs=m@221097413,traffic&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        minZoom: 2,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    });

Please see their General Terms

Hope someone helps this

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!