在网页中插入百度地图地址及解决百度地图中心偏移到左上角的方法

最新推荐文章于 2022-12-06 16:20:07 发布

Creabine

最新推荐文章于 2022-12-06 16:20:07 发布

阅读量8.7k

点赞数 4

分类专栏：实践思考 HTML JavaScript/jQuery 插件&工具文章标签： html5 百度地图

本文链接：https://blog.csdn.net/creabine/article/details/50563942

版权

JavaScript/jQuery 同时被 3 个专栏收录

77 篇文章 0 订阅

订阅专栏

实践思考

46 篇文章 0 订阅

订阅专栏

插件&工具

17 篇文章 0 订阅

订阅专栏

在做练习项目的时候遇到了需要在网页中插入百度地图的部分，把方法记录在这里。

其实插入地图很简单，在下边的网址可以直接得到需要插入的地图，然后生成相应的代码：

http://api.map.baidu.com/lbsapi/creatmap/

我在项目中，将生成的地图代码放在单独的html文件中，再引入需要地图的html文件。这里，需要注意的一点是，百度生成的html文件代码中，其编码格式如下：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

默认为 gb2312 ，此时若直接引入html文件，由于他们的编码格式不同，出现的地图上显示的汉字将变为乱码，此时要记得把编码格式改为UTF-8，再进行引入才行。

另外，HTML5中不再支持<frameset>和<frame>标签，而是使用<iframe>标签来引入，即：

<section id="map_3">
 <iframe src="baidumap.html"></iframe>
</section>

即可，这里注意设置iframe的border为0,否则会产生偏移。

最后，有一个奇怪的问题尚未能解决：

若我直接打开baidumap.html，那么显示无误，为下图：

但是当我引入我的html文件时，出现的地图标记却不在中心位置，产生了部分偏移，如下图：

这种情况有时发生，有时刷新之后又恢复正常，很奇怪，暂时没能解决。

找到了其他博主的文章，似乎可以解决问题，地址：

http://blog.csdn.net/zhujianli1314/article/details/45696259

更新：

该问题已经解决，我使用了另一种自己想到的办法：

之所以地图中心点会偏移，是因为当div隐藏的时候，默认宽高均为0，所以中心点出现也就在0点，即左上角了。

也就是说，只要让地图在div从隐藏状态出现之后再插入，此时div宽高不为0了，那么就不会出现偏移了。

所以我在自己的js中，加入了以下代码：

var loadCount = 1;   
	function showMap(){
		outmap.style.display="block";
		if(loadCount == 1){
		map_3.innerHTML="<iframe id='baidumappage' src='baidumap.html'></iframe>";
		}
		loadCount = loadCount + 1;  
	}

function showMap()是我自己写的函数：用于将隐藏的id=outmap这个div显示出来。

其中loadCount用于让地图只在第一次div显示之后加载，以避免重复加载浪费资源。

我让id=outmap的隐藏div显示之后，再使用innerHTML将

<iframe id='baidumappage' src='baidumap.html'></iframe>";

插入div中，进行加载地图。

结果成功：

简单的改变顺序之后，就可以顺利的解决这个问题了，很棒吧~~~哈哈~

2016.3.8更新：为了防止有需要的小伙伴看不懂，我写了个简单的demo，供大家参考：

<!DOCTYPE html>
<html>
  <head>	
    <title>mapdemo</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
  </head>
  <body>
  <div style="width: 100px;height: 100px;background-color: black;color: white;text-align: center;line-height: 100px;" οnmοuseοver="show_map()" οnmοuseοut="no_map()">
    显示地图
  </div>
  <div id="mapdiv" style="width: 300px;height: 300px;border: 1px black solid; display: none;"></div>

<script type="text/javascript">
    var mapload=1

  function show_map(){
    mapdiv.style.display="block";
    if (mapload=1) {
//下边的iframe中插入的就是你需要的百度地图html文件。名字和地址修改为你的文件即可。
      mapdiv.innerHTML="<iframe id='baidumappage' src='html/baidumap.html'></iframe>";
      mapload=2;
    }
  }

  function no_map(){
    mapdiv.style.display="none";
  }
</script>

  </body>
  </html>

Creabine

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
6
评论
在网页中插入百度地图地址及解决百度地图中心偏移到左上角的方法

在做练习项目的时候遇到了需要在网页中插入百度地图的部分，把方法记录在这里。其实插入地图很简单，在下边的网址可以直接得到需要插入的地图，然后生成相应的代码：http://api.map.baidu.com/lbsapi/creatmap/我在项目中，将生成的地图代码放在单独的html文件中，再引入需要地图的html文件。这里需要注意的一点时，HTML5中不再支持和标签
复制链接

扫一扫