参考:​​https://www.jianshu.com/p/b48ec99011c2​

leaflet使用百度地图,叠加层使用硬件/谷歌坐标。

leaflet默认使用硬件/谷歌坐标,使用百度地图需要进行坐标偏移。就是把硬件/谷歌坐标转换成百度坐标。

网上搜到一些解决方法,但是总是不奏效。最后还是拿网上的改了下

此方法是直接在地图投影方法出设置偏移。具体如下:

1、引入支持leaflet的proj4(​​https://github.com/kartena/Proj4Leaflet​​)

2、引入自定义百度地图层 tileLayer.baidu.js

3、leaflet地图初始化时crs参数设置为L.CRS.Baidu,layers设置为L.tileLayer.baidu

示例:

22.532934684, 114.0547117002是谷歌地图坐标

 

leaflet使用百度地图_html

image.png

源码:

  1.  

    <html>
  2.  

    <head >
  3.  

    <script src="ui/js/jquery-1.11.3.min.js" ></script >
  4.  

    <script src="ui/leaflet1.3/leaflet-src.js" ></script >
  5.  

    <script src="ui/leaflet1.3/Proj4Leaflet/lib/proj4.js" ></script >
  6.  

    <script src="ui/leaflet1.3/Proj4Leaflet/src/proj4leaflet.js" ></script >
  7.  

    <script src="ui/leaflet1.3/leaflet-baidu/tileLayer.baidu.js" ></script >
  8.  

    </head >
  9.  

    <body >
  10.  

    <div id="mapdiv" ></div >
  11.  

    </body >
  12.  

    <script type="text/javascript" >
  13.  

    <!--
  14.  

    $(document).ready(function(){
  15.  

    var options = {
  16.  

    center: [22.532934684, 114.0547117002],
  17.  

    zoom: 15,
  18.  

    crs: L.CRS.Baidu,
  19.  

    layers: [new L.tileLayer.baidu({ layer: 'custom',customid:'midnight'})]
  20.  

    };
  21.  

    var map = L.map("mapdiv", options);
  22.  

    L.marker([22.532934684, 114.0547117002]).addTo(map).bindTooltip("会展中心").openTooltip();
  23.  

    });
  24.  

    //-- >
  25.  

    </script >
  26.  

    </html >
  27.  
     

附件:​​leaftet百度.rar​