leaflet加载百度地图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012087400/article/details/52847614

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

以上的这些参数都是来自于这篇文章,这里不多做说明，如果有不懂的地方欢迎留言，加我QQ.

演示地址:http://gdyblog.com/Demo/Baidu/index.html

矫正篇

blog:http://gdyblog.com

QQ:84201088

QQ备注“Jack”