Leaflet对接百度地图添加Marker

作者：lly

一：背景

最近很多小伙伴使用iClient for Leaflet中的第三方地图百度地图展示marker时发现有偏移的问题，今天我们就来聊聊如何正确展示。

二：坐标转换

首先百度地图使用的是BD09坐标，若使用非BD09坐标、未经过坐标转换（非BD09转成BD09）直接叠加在地图上，地图展示位置会偏移，因此通过其他坐标（WGS84、GCJ02）调用服务时，需先用百度接口将其他坐标转换为BD09。
这里要注意的是首先Leaflet中marker需要经纬度坐标，其次api转换出来的BD09ll坐标直接加到baiduTileLayer上是会偏移的，所以我们需要按照以下步骤进行转换：
1.将其他坐标系通过SuperMap Online接口转换为BD09mc投影坐标系
2.将得到的结果使用unproject转换为经纬度坐标，再进行添加

三：代码及效果展示

下面我们以4326天安门坐标系为例，进行转换添加

   var map = L.map('map', {
    
    
            crs: L.CRS.Baidu,
            center: [0, 0],
            zoom: 3
        });
        L.supermap.baiduTileLayer("", {
    
    
            noWrap: true
        }).addTo(map);
        
        
        $.ajax({
    
    
            type:"GET",
            url:'https://www.supermapol.com/iserver/services/coordconvert/rest/coordinate/convert.json?points=[{"x":116.39130978687828,"y":39.90737168035109}]&from=4326&to=910112&key=fvV2osxwuZWlY0wJb8FEb2i5',
            dataType:"json",
            success:function(res){
    
    
                 let points=L.CRS.Baidu.unproject(res[0]);
                 L.marker([points.lat,points.lng]).addTo(map)
            }
        });

请求接口：

结果展示：