百度地图JavaScript API如何在同一页面显示多个地图?
2013-04-06 14:33
435 查看
经常有人问,百度地图JavaScript API能在同一页面显示多个地图吗?当然可以啊,为什么不可以呢?地图之于页面无非就是个div,我们可以在页面显示多个div,自然也可以显示多个地图。
以下是在页面加入两个地图的效果:
页面核心代码如下:
以上代码可以实现在同一页面显示两幅并排的地图,如果想要实现拖拽、缩放左边的地图,右边的地图也随着移动、缩放,则只需要给左边的地图注册zoomend和moveend事件即可,代码如下:
完整代码如下:
欢迎大家咨询百度地图JSAPI的问题。
以下是在页面加入两个地图的效果:
页面核心代码如下:
<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>
欢迎大家咨询百度地图JSAPI的问题。
相关文章推荐
- 百度地图JavaScript API如何在同一页面显示多个地图?
- 百度地图如何引用到自己网站,并在地图上显示企业的相关信息
- Android百度地图开发之开发第一个小应用,显示基础的地图页面
- 百度地图:一个页面多个地图,只显示一个地图的解决办法
- 百度地图多个兴趣点(经纬度、坐标点)需要同时显示在地图上,如何设置自动缩放等级
- 如何在一个页面显示多个百度地图
- 如何调用百度地图,传递经纬度,内容,在地图上显示
- 百度地图高级实例2-如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 如何在一个页面显示多个百度地图
- 如何提高页面的显示速度
- Android开发中,集成百度地图时,如何去除地图中的比例尺控件和缩放控件
- 如何添加地图控件到Windows Phone 8的页面中
- Android : 如何在WebView显示的页面中查找内容
- 如何在搜索页面中高亮显示关键字
- 安卓开发SHA1获取方法、安卓百度地图开发Release版本地图无法显示
- 如何让Zend Studio正确显示php页面中的中文字符
- 如何在页面加载时,显示选中一些选项
- DefaultFilesMiddleware中间件如何显示默认页面
- 如果图片路径或者名称是中文,如何在页面显示
- 【JSP页面】如何根据Select的选项来决定页面input的显示隐藏