如何在一个页面显示多个百度地图


Posted in Javascript onApril 07, 2013

以下是在页面加入两个地图的效果:

如何在一个页面显示多个百度地图

页面核心代码如下:

<style type="text/css">
#mapDiv1 { height:400px; width:600px; }
#mapDiv2 { height:400px; width:600px; left:620px; top:-420px;}
</style>
<body>
<div id="mapDiv1" ></div>
<br />
<div id="mapDiv2" ></div>
</body>
</html>
<script type="text/javascript">
//地图初始化
var map1 = new BMap.Map("mapDiv1");
map1.centerAndZoom(new BMap.Point(116.401394,39.915156),12);
map1.enableScrollWheelZoom();
var map2 = new BMap.Map("mapDiv2",{mapType: BMAP_HYBRID_MAP}); //设置卫星图为底图
map2.centerAndZoom(new BMap.Point(116.401394,39.915156),12);
map2.enableScrollWheelZoom();
</script>

以上代码可以实现在同一页面显示两幅并排的地图,如果想要实现拖拽、缩放左边的地图,右边的地图也随着移动、缩放,则只需要给左边的地图注册zoomend和moveend事件即可,代码如下:

map1.addEventListener("zoomend", function () {
map2.zoomTo(map1.getZoom());
map2.panTo(map1.getCenter());
});
map1.addEventListener("moveend", function () {
map2.zoomTo(map1.getZoom());
map2.panTo(map1.getCenter());
});

完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>地图接口</title>
</head>
<style type="text/css">
#mapDiv1 { height:400px; width:600px; }
#mapDiv2 { height:400px; width:600px; left:620px; top:-420px;}
</style>
<body>
<div id="mapDiv1" ></div>
<br />
<div id="mapDiv2" ></div>
</body>
</html>
<script type="text/javascript">
//地图初始化 
var map1 = new BMap.Map("mapDiv1");
map1.centerAndZoom(new BMap.Point(116.401394,39.915156),12);
map1.enableScrollWheelZoom();
var map2 = new BMap.Map("mapDiv2",{mapType: BMAP_HYBRID_MAP}); //设置卫星图为底图
map2.centerAndZoom(new BMap.Point(116.401394,39.915156),12);
map2.enableScrollWheelZoom();

map1.addEventListener("zoomend", function () {
map2.zoomTo(map1.getZoom());
map2.panTo(map1.getCenter());
});
map1.addEventListener("moveend", function () {
map2.zoomTo(map1.getZoom());
map2.panTo(map1.getCenter());
});
</script>
Javascript 相关文章推荐
JavaScript Chart 插件整理
Jun 18 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
关于JS字符串函数String.replace()
Apr 07 #Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 #Javascript
JS完成代码前最好对其做5件事
Apr 07 #Javascript
有关于JS辅助函数inherit()的问题
Apr 07 #Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 #Javascript
jquery实现excel导出的方法
Apr 04 #Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 #Javascript
You might like
最省空间的计数器
2006/10/09 PHP
Wordpress php 分页代码
2009/10/21 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
PDO::setAttribute讲解
2019/01/29 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
jQuery动态添加
2016/04/07 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python编程中的反模式实例分析
2014/12/08 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python处理写入数据代码讲解
2020/10/22 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
大学生活动策划方案
2014/02/10 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
新春联欢会主持词
2014/03/24 职场文书
索赔员岗位职责
2015/02/15 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server