time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > 【百度地图API】如何制作孪生姐妹地图?

【百度地图API】如何制作孪生姐妹地图?

时间:2011-03-22 23:02 点击:647次 字体:[ ]




任务描述:

  我想要两张一模一样的地图!我想要双子地图!我想要孪生姐妹地图

  好好好,统统满足大家!

  在这里我不需要使用百度地图API提供的地图缩略图控件,而是自己动手做一对双胞胎地图

 

如何实现?

  创建两张地图,map1和map2,他俩的中心点和地图级别(放大倍数)不同。

  当鼠标移动map1的中心点时,map2的中心点会随着一起变化,最终和map1的中心点一致。

  同理,可以实现用鼠标滚轮放大缩小地图。

 

操作试试:

  移动左边的地图,右边的地图会随着一起运动;

  对左边的地图使用鼠标滚轮(中键),右边的地图也会放大或者缩小。

 

图示:

【百度地图API】如何制作孪生姐妹地图?_www.fengfly.com

  

代码:

 

代码
<!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 name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两个地图联动</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true">
</script>
</head>
<body>
<p>
任务描述:当map1运动完以后,map2会跟着map1一起,改变中心点,改变放大级别。
</p>
<div style="float:left;">
<p>MAP1</p>
<div style="width:520px;height:340px;border:1px solid gray" id="container1"></div>
</div>
<div style="float:left;">
<p>MAP2</p>
<div style="width:520px;height:340px;border:1px solid gray" id="container2"></div>
</div>
</body>
<script type="text/javascript">
var map1 = new BMap.Map("container1");
var map2 = new BMap.Map("container2");

var point1 = new BMap.Point(116.411053,39.950507); // 创建中心点
var point2 = new BMap.Point(116.411053,39.950507); // 创建中心点

map1.centerAndZoom(point1,
12); // 初始化地图map1,设置中心点和地图级别。
map2.centerAndZoom(point2,12); // 初始化地图map2,让地图级别和map1一致。

map1.addEventListener(
"moveend",function(){map2.panTo(map1.getCenter());}); //让map2跟着map1走
map1.addEventListener("zoomend",function(){map2.zoomTo(map1.getZoom());}); //让map2的地图等级与map1一致

map1.enableScrollWheelZoom();
// 启用滚轮放大缩小
</script>
</html>


本文地址 : http://www.fengfly.com/plus/view-197323-1.html
标签: 百度地图 API 孪生姐妹地图
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: