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

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

页面核心代码如下:

代码如下:

<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>

赞 (0)

相关推荐

  • 百度地图api应用标注地理位置信息(js版)

    百度地图api应用标注地理位置信息(js版)

    有时做了一些东西没有记录,而过一段时间再看的时候,有会忘记了.需要在重新在看一遍. 百度地图javascript api可以参考 http://developer.baidu.com/map/reference/  示例:http://developer.baidu.com/map/jsdemo.htm 更多百度地图的介绍http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/   里面介绍的非常详细. 弄了一个百度地图来标注地理位置信息

  • 用Android Location获取当前地理位置的方法

    在Android应用中,往往有获取当前地理位置的需求,比如微信获取附近的人需要获取用户当前的位置,不多说,直接上例子. 复制代码 代码如下: public Location getLocation() {// 获取Location通过LocationManger获取!  LocationManager locManger = (LocationManager) getSystemService(Context.LOCATION_SERVICE);  Location loc = locMange

  • JS中引用百度地图并将百度地图的logo和信息去掉

    采用CSS覆盖的方法就可以了,但是官方是不允许这么做的,参考:http://developer.baidu.com/map/question.htm 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>javascript移除百度地图LOGO和版权信息</title> <script type="text/j

  • 利用百度地图JSAPI生成h7n9禽流感分布图实现代码

    利用百度地图JSAPI生成h7n9禽流感分布图实现代码

    下图为使用百度地图JSAPI生成的H7N9感染分布图示例,其中的数据来自新华网(4.8号),截图如下: 使用的功能列表如下: 1.自定义版权控件功能,即(1)对应的数据来源部分,代码如下: 复制代码 代码如下: var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); map.addControl(cr); //添加版权控件 var bs = map.getBounds(); cr.addCopyright({id:

  • c#通过ip获取地理信息

    复制代码 代码如下: /// <summary>      /// 通过IP得到IP所在地省市(Porschev)      /// </summary>      /// <param name="ip"></param>      /// <returns></returns>      public string GetAdrByIp(string ip)      {          string url

  • ios百度地图的使用（普通定位、反地理编码）

    iOS定位 - 普通定位(没有地图) - 反地理编码(得到具体位置),下面通过代码给大家详解,代码如下: #import <CoreLocation/CoreLocation.h> 使用到的头文件 要引入CoreLocation这个包 <CLLocationManagerDelegate> 使用的代理名称 //1.使用定位服务 //设置app有访问定位服务的权限 //在使用应用期间 / 始终(app在后台) //info.plist文件添加以下两条(或者其中一条): //NSLoc

  • 通过百度地图获取公交线路的站点坐标的js代码

    最近做百度地图的模拟数据,需要获取某条公交线路沿途站点的坐标信息,貌似百度没有现成的API,因此做了一个模拟页面,工具而已,IE6/7/8不支持 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>获取公交站点坐标</title> <style type="text/css"> html,b

  • c#实现根据网络IP显示地理位置功能示例

    用户信息表,是大多数系统都有的.我们也知道,通常都会有类似 注册IP 和 最后登录IP 这两个的字段,来存储用户注册时候的IP地址和最后登录的IP的地址. 获取这样的地址,在后台显示 xxx.xxx.xxx.xxx 的地址段,让人看到很不自然,根本就不知道具体地理位置. 现在我们就简单的实现一下这个功能. 用到了读取纯真IP数据库的公用组件QQWry.NET 这个组件,作者阿不.(谢谢他的共享) 还要去下载最新的纯真IP地址库,下载获得QQWry.dat 最后请出Js中的小靓妞,jquery-1

  • java调用百度定位api服务获取地理位置示例

    复制代码 代码如下: package test; import java.io.BufferedReader;import java.io.IOException;import java.io.InputStream;import java.io.InputStreamReader;import java.io.Reader;import java.net.URL;import java.nio.charset.Charset; import org.json.JSONException;imp

  • Android下如何使用百度地图sdk

    Android下如何使用百度地图sdk

    可以使用该套 SDK开发适用于Android系统移动设备的地图应用,通过调用地图SDK接口,您可以轻松访问百度地图服务和数据,构建功能丰富.交互性强的LBS(地图类)应用程序. 百度地图Android SDK提供的所有服务是免费的,接口使用无次数限制.您需申请密钥(key)后,才可使用百度地图Android SDK.任何非营利性产品请直接使用.这弦外之音就是盈利的产品必须帮百度给钱. 一.百度地图api平台. 百度地图API网址:http://developer.baidu.com/map/sd

随机推荐