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


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函数内部this指针指向的三种方法
Apr 23 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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
神族 PROTOSS 概述
2020/03/14 星际争霸
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
php判断linux下程序问题实例
2015/07/09 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
python 字符串格式化代码
2013/03/17 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
window下eclipse安装python插件教程
2017/04/24 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
python中的colorlog库使用详解
2019/07/05 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
先进个人事迹材料
2014/01/25 职场文书
运动会通讯稿300字
2014/02/02 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
消防演习通知
2015/04/25 职场文书
小学庆六一主持词
2015/06/30 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
使用feign服务调用添加Header参数
2021/06/23 Java/Android
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技