网页使用百度地图后,显示不全(已解决)

网页使用百度地图后,显示不全(已解决)

地图是用百度地图生成器生成的:
百度地图生成器地址:http://api.map.baidu.com/lbsapi/creatmap/

直接粘贴过来的代码,放到一个空白的新网页中是正常的
但是放到自己的网页中,就会显示不正常,如下图

这里写图片描述

错误原因分析:

发现在CSS中有一句(是用来防止图片宽度超过父容器宽度而设置的):

.container img {
    max-width: 100%;
}

然而就是因为这句话让百度地图显示出错,
因此解决办法:
方法1:把父容器css的 max-width: 100%; 这一句 删掉
方法2:直接给地图加一个css样式:

(地图的id为 #dituContent

#dituContent img{
  max-width: none;
}

修改后显示正常:

这里写图片描述

这个问题可能是由于不同地图使用的坐标系不同导致的,百度地图使用的是BD-09坐标系,而腾讯地图使用的是GCJ-02坐标系。 因此,需要将百度地图的经纬度转换为GCJ-02坐标系的经纬度,然后再在腾讯地图显示。可以使用第三方的坐标转换库来实现。 比如,可以使用百度地图提供的API将BD-09坐标系的经纬度转换为WGS-84坐标系的经纬度,然后再使用腾讯地图提供的API将WGS-84坐标系的经纬度转换为GCJ-02坐标系的经纬度。 具体实现过程可以参考以下代码示例: ```javascript // 将百度地图的经纬度转换为WGS-84坐标系的经纬度 function bd09ToWgs84(bdLon, bdLat) { var x = bdLon - 0.0065; var y = bdLat - 0.006; var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI); var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * Math.PI); var lng = z * Math.cos(theta); var lat = z * Math.sin(theta); return [lng, lat]; } // 将WGS-84坐标系的经纬度转换为GCJ-02坐标系的经纬度 function wgs84ToGcj02(lng, lat) { var a = 6378245.0; var ee = 0.00669342162296594323; var dLat = transformLat(lng - 105.0, lat - 35.0); var dLng = transformLng(lng - 105.0, lat - 35.0); var radLat = lat / 180.0 * Math.PI; var magic = Math.sin(radLat); magic = 1 - ee * magic * magic; var sqrtMagic = Math.sqrt(magic); dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI); dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI); var mgLat = lat + dLat; var mgLng = lng + dLng; return [mgLng, mgLat]; } // 转换经度 function transformLng(lng, lat) { var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); ret += ((20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0) / 3.0; ret += ((20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin((lng / 3.0) * Math.PI)) * 2.0) / 3.0; ret += ((150.0 * Math.sin((lng / 12.0) * Math.PI) + 300.0 * Math.sin((lng / 30.0) * Math.PI)) * 2.0) / 3.0; return ret; } // 转换纬度 function transformLat(lng, lat) { var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); ret += ((20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0) / 3.0; ret += ((20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin((lat / 3.0) * Math.PI)) * 2.0) / 3.0; ret += ((160.0 * Math.sin((lat / 12.0) * Math.PI) + 320 * Math.sin((lat * Math.PI) / 30.0)) * 2.0) / 3.0; return ret; } // 将百度地图的经纬度转换为腾讯地图的经纬度 function bd09ToTencent(bdLon, bdLat) { var wgs84 = bd09ToWgs84(bdLon, bdLat); var gcj02 = wgs84ToGcj02(wgs84[0], wgs84[1]); return gcj02; } ``` 使用示例: ```javascript var bdLon = 116.404; var bdLat = 39.915; var tencent = bd09ToTencent(bdLon, bdLat); console.log(tencent); // [116.39762729192001, 39.908656739576166] ``` 其中,`bdLon`和`bdLat`分别为百度地图的经纬度,`tencent`为转换后的腾讯地图的经纬度。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值