leaflet使用百度地图

最新推荐文章于 2024-05-11 00:00:00 发布

Kevinvcc200

最新推荐文章于 2024-05-11 00:00:00 发布

阅读量6.9k

点赞数 1

分类专栏： map地图

map地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考：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

源码：

<html> 
<head > 
<script src="ui/js/jquery-1.11.3.min.js" ></script > 
<script src="ui/leaflet1.3/leaflet-src.js" ></script > 
<script src="ui/leaflet1.3/Proj4Leaflet/lib/proj4.js" ></script > 
<script src="ui/leaflet1.3/Proj4Leaflet/src/proj4leaflet.js" ></script > 
<script src="ui/leaflet1.3/leaflet-baidu/tileLayer.baidu.js" ></script > 
</head > 
<body > 
<div id="mapdiv" ></div > 
</body > 
<script type="text/javascript" > 
<!-- 
$(document).ready(function(){ 
 var options = { 
   center: [22.532934684, 114.0547117002], 
    zoom: 15, 
    crs: L.CRS.Baidu, 
    layers: [new L.tileLayer.baidu({ layer: 'custom',customid:'midnight'})] 
};
var map = L.map("mapdiv", options);
L.marker([22.532934684, 114.0547117002]).addTo(map).bindTooltip("会展中心").openTooltip();
}); 
//-- > 
</script > 
</html >

附件：leaftet百度.rar

Kevinvcc200

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
leaflet使用百度地图

参考：https://www.jianshu.com/p/b48ec99011c2leaflet使用百度地图，叠加层使用硬件/谷歌坐标。leaflet默认使用硬件/谷歌坐标，使用百度地图需要进行坐标偏移。就是把硬件/谷歌坐标转换成百度坐标。网上搜到一些解决方法，但是总是不奏效。最后还是拿网上的改了下参考了以下文章：https://blog.csdn.net/u012087400/ar...
复制链接

扫一扫