网页调用百度地图显示不正常问题解决方法汇总

我们在网站建设时往往要向用户展示公司位置信息，多数地图平台都提供代码调用，如百度地图的地图生成器，但是网页调用百度地图往往会出现不显示或显示不正常的问题和标注点不显示的问题。接下来天水网站建设小士就来说说遇到这种情况的解决方法步骤。

　　一、地图不显示或显示不正常

地图不显示或显示不正常最常见的是图片元素的父级及以上CSS样式设置造成的，我们具体看看解决步骤。

　　步骤一：确定地图代码本身是否有问题

你可以把直接粘贴过来的代码放到一个空白的新网页中看看显示是不是正常，如果正常，说明代码没问题，这种情况一般不会出现。

　　步骤二：检查地图容器父级及以上图片元素的CSS样式

重点检查父级级以上图片元素的CSS样式是否设置了以下这几个样式，从父级元素逐级向上检查。

1、max-width: 100%;

2、max-height:100%;

3、display: inline-block;或display:block;

4、box-sizing: content-box;

5、box-shadow: rgb(0, 0, 0) 3px 3px 5px;

如果发现父级及以上容器的CSS样式设置了以上样式代码，问题就出在这里了。

步骤三：在地图容器中对img样式重新设定

因为，百度地图容器的内容是以图片的形式存在，图片样式继承了父级容器或父级以上容器图片的样式属性，因此会造成显示不正常或不显示，这就需要对地图容器的图片样式重新设定。有些朋友会直接把父级及以上的图片样式这些属性删除，天水网站制作小士不建议这样去做。如果直接删除，地图显示正常了，其他地方就又出问题了，下面是重新设定CSS样式的方法：

1、max-width: none;

2、max-height:none;

3、display: inline;

4、box-sizing: initial;

5、box-shadow: rgb(0, 0, 0) 0px 0px 0px;

　　二、百度地图标注点不显示

还有一个问题，就是百度地图调用后，标注点不显示的问题。这是百度地图的一个BUG，原因是标记点的图片路径不正确，生成的代码中的icon地址路径不正确，解决方法如下：

步骤一：在获取的代码中找到var icon = new BMap.Icon ，生成的代码中的icon地址是http://app.baidu.com/map/images/us_mk_icon.png ，当我们访问这张图片时出现404错误，说明图片不存在。

步骤二：替换图片地址改为：http://map.baidu.com/image/us_mk_icon.png 或 http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png ，也可以将图片保存到自己的网站上，改成自己的图片路径。

以上是，天水网站设计小士给您总结的网页调用百度地图不显示或显示不正常的常见问题解决方法，希望能给你有帮助，关注我们会带来更多网站建设小常识。