百度地图-同时加载多张地图

来源：互联网发布：东德与西德合并知乎编辑：程序博客网时间：2024/04/29 03:00

1、问题背景

在一个界面，同时展示不同城市地图分布情况

2、实现源码

<!DOCTYPE html><html>   <head>    <title>同时加载四张地图</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak密钥"></script><style>body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}#container1{width:50%;height:50%;float:left;overflow: hidden;margin:5;}#container2{width:50%;height:50%;float:right;overflow: hidden;margin:5;}#container3{width:50%;height:50%;float:left;overflow: hidden;margin:5;}#container4{width:50%;height:50%;float:right;overflow: hidden;margin:5;}#map1{margin:0 0 3px;height:100%;}#map2{margin:3px 0 0;height:100%;}#map3{margin:3px 0 0;height:100%;}#map4{margin:3px 0 0;height:100%;}</style>   </head><body><div id="container1"><div id="map1"></div></div><div id="container2"><div id="map2"></div></div><div id="container3"><div id="map3"></div></div><div id="container4"><div id="map4"></div></div></body></html><script type="text/javascript">//加载第一张地图var map1 = new BMap.Map("map1");                var point1 = new BMap.Point(114.309531, 30.59619);      map1.centerAndZoom(point1,15);                   map1.enableScrollWheelZoom();                      //加载第二张地图var map2 = new BMap.Map("map2");            // 创建Map实例    var point2 = new BMap.Point(106.554865,29.569238);      map2.centerAndZoom(point2,15);                     map2.enableScrollWheelZoom();                  //启用滚轮放大缩小        //加载第二张地图var map3 = new BMap.Map("map3");            // 创建Map实例    var point3 = new BMap.Point(118.797717,32.064001);      map3.centerAndZoom(point3,15);                     map3.enableScrollWheelZoom();         //加载第二张地图var map4 = new BMap.Map("map4");            // 创建Map实例    var point4 = new BMap.Point(121.476788,31.236058);      map4.centerAndZoom(point4,15);                     map4.enableScrollWheelZoom();</script>

3、实现结果

0 0