解决google map 卫星图层和电子地图图层偏移问题

前段时间用 google map 时发现 map的UI和以前不一样了,颜色和图标变好多了。但更让人惊喜的是电子地图和卫星地图居然完全吻合了(城镇基本都吻合,乡下可能还会有偏差,相信谷歌会慢慢改进),这个一直困扰google map 开发者的问题终于解决了。然后我查看自己开发的map应用,还是和以前一样,还是存在偏移问题。在思索良久,查了N多资料后终于找到了解决办法:在调用google map api 时应该用http://ditu.google.cn/maps/api/js ,如果以前用的是 http://maps.google.com/maps/api/js 就会出现偏移。
Leaflet是一个轻量级的JavaScript库,用于创建交互式的在线地图。要在Leaflet上加载百度地图图层,并处理坐标偏移,你需要遵循以下步骤: 1. 首先,确保已经在项目中引入了Leaflet库百度地图API。通常情况下,可以在HTML文件中通过CDN链接引入它们: ```html <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script> <!-- 百度地图API --> <script src="https://api.map.baidu.com/api?v=4.0&ak=your_baidu_api_key"></script> ``` 记得替换`your_baidu_api_key`为你的实际百度地图API密钥。 2. 创建一个Leaflet地图实例,并设置其初始位置: ```javascript var map = L.map('map').setView([39.9042, 116.4074], 13); // 北京中心坐标作为默认视图 ``` 3. 使用百度地图提供的服务创建一个图层,然后将这个图层添加到Leaflet地图上。百度地图图层通常会返回一个`BMap.Map`对象,需要转换成适合 Leaflet使用的L.Marker或其他图层类型。这里假设有一个`loadBmapLayer()`函数负责协调这个过程: ```javascript function loadBmapLayer() { var bmap = new BMap.Map('bmapContainer'); // 定义一个div id为'bmapContainer' // 加载百度地图并设置中心点 bmap.centerAndZoom(new BMap.Point(39.9042, 116.4074), 13); // 转换百度地图的标记到Leaflet坐标系 var latlng = bmap.getCenter().transform('mercator'); // 将转换后的坐标添加到Leaflet地图 L.marker(latlng).addTo(map); } ``` 4. 调用`loadBmapLayer()`函数来初始化地图百度地图图层: ```javascript loadBmapLayer(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值