leaflet加载百度地图

最新推荐文章于 2025-05-20 11:26:18 发布

原创最新推荐文章于 2025-05-20 11:26:18 发布 · 1.8w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #高德地图 #互联网 #地图 #腾讯

工作日常专栏收录该内容

7 篇文章

订阅专栏

leaflet加载百度地图

由于百度地图的切片规则和普通的互联网地图的切片规则不那么一样，所以大多数的文章介绍了如何加载例如：天地图，高德地图，腾讯地图等地图，但是唯独百度地图的介绍的不多也有一些感觉是不太合适的，我从这篇文章了解到了他的一些切片规则，然后决定将百度地图拓展出来，给需要他的人使用。

首先需要一些第三方的插件

坐标系拓展

首先我使用了这个玩意儿。

这里需要注意的是，如果你使用的是0.7版本的Leaflet就可以直接下载使用了，如果用的是1.0版本的leaflet那需要选择leaflet-proj-refactor分支

然后上代码


 var crs = new L.Proj.CRS('EPSG:3395',
            '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs',
            {
                resolutions: function () {
                    level = 19
                    var res = [];
                    res[0] = Math.pow(2, 18);
                    for (var i = 1; i < level; i++) {
                        res[i] = Math.pow(2, (18 - i))
                    }
                    return res;
                }(),
                origin: [0, 0],
                bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
            }),
             map = L.map('map', {
                crs: crs
            });

    new L.TileLayer('http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20160928&scale=1&styles=t%3Abackground%7Ce%3Aall%7Cc%3A%23034dc1%7Ch%3A%23034dc1', {
        maxZoom: 18,
        minZoom: 3,
        subdomains: [0,1,2],
        tms: true
    }).addTo(map);

    new L.marker([39.91349,116.407945]).addTo(map);

    map.setView([39.91349,116.407945], 15);