在做练习项目的时候遇到了需要在网页中插入百度地图的部分,把方法记录在这里。
其实插入地图很简单,在下边的网址可以直接得到需要插入的地图,然后生成相应的代码:
http://api.map.baidu.com/lbsapi/creatmap/
我在项目中,将生成的地图代码放在单独的html文件中,再引入需要地图的html文件。这里,需要注意的一点是,百度生成的html文件代码中,其编码格式如下:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
另外,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显示出来。
我让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>