leaflet使用百度地圖


參考:https://www.jianshu.com/p/b48ec99011c2

leaflet使用百度地圖,疊加層使用硬件/谷歌坐標。
leaflet默認使用硬件/谷歌坐標,使用百度地圖需要進行坐標偏移。就是把硬件/谷歌坐標轉換成百度坐標。

網上搜到一些解決方法,但是總是不奏效。最后還是拿網上的改了下

參考了以下文章:
https://blog.csdn.net/u012087400/article/details/53744756
https://blog.csdn.net/u012087400/article/details/52847614

此方法是直接在地圖投影方法出設置偏移。具體如下:
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是谷歌地圖坐標

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM