在网页实现多个地图显示

在页面能添加多个地图，是tab效果切换，并默认可以展开联系框。

img

<div class="pack">
  <ul class="map-top">
    <li>华北办事处</li>
    <li>华东办事处</li>
    <li>西南办事处</li>
  </ul>
  <div class="map-down">
    <div class="box">
      <div id="ditu1" class="ditu"></div>
    </div>
    <div class="box">
      <div id="ditu2" class="ditu"></div>
    </div>
    <div class="box">
      <div id="ditu3" class="ditu"></div>
    </div>
  </div>
</div>

<style>
.pack{position:relative;padding:100px 0;min-height:1000px}
.map-top{position:relative;z-index:2;float:left;width:400px;margin-left:100px;background:#fff;}
.map-top li{cursor:pointer;border-bottom:1px #eee solid}
.map-top li:last-child{border-bottom:0px;}
.map-top a{position:relative;display: block;color:#888888;font-size:18px;padding: 22px 40px;line-height: 1;}
.map-top .on a{color:#333;background: #f9f9f9;}
.map-down{position:absolute; top: 0;right:0;bottom:0;left:0;z-index: 1;}
.map-down .box{width:100%;height:100%;} 
.map-down .ditu{width:100%;height:100%;}
</style>

<script type="text/javascript">
    $('.map-top li').mouseover(function() {
        $(this).addClass("on").siblings().removeClass('on');
        var idx = $(this).index();
        $(".map-down .box").eq(idx).addClass("on").siblings(".map-down .box").removeClass("on");
    });
</script>


<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery.js"></script>
</head>
 
<body>
    <div class="pack">
  <ul class="map-top">
    <li>华北办事处</li>
    <li>华东办事处</li>
    <li>西南办事处</li>
  </ul>
  <div class="map-down">
    <div class="box">
      <div id="ditu1" class="ditu">11</div>
    </div>
    <div class="box">
      <div id="ditu2" class="ditu">22</div>
    </div>
    <div class="box">
      <div id="ditu3" class="ditu">33</div>
    </div>
  </div>
</div>
 
<style>
.pack{position:relative;padding:100px 0;min-height:1000px}
.map-top{position:relative;z-index:2;float:left;width:400px;margin-left:100px;background:#fff;}
.map-top li{cursor:pointer;border-bottom:1px #eee solid}
.map-top li:last-child{border-bottom:0px;}
.map-top a{position:relative;display: block;color:#888888;font-size:18px;padding: 22px 40px;line-height: 1;}
.map-top .on a{color:#333;background: #f9f9f9;}
.map-down{position:absolute; top: 0;right:0;bottom:0;left:0;z-index: 1;}
.map-down .box{width:100%;height:100%;display: none;}
.map-down .box.on{display: block;}
.map-down .ditu{width:100%;height:100%;}
</style>
 
<script type="text/javascript">
    $(".map-down .box").eq(0).addClass('on')
    $('.map-top li').mouseover(function() {
        $(this).addClass("on").siblings().removeClass('on');
        var idx = $(this).index();
        $(".map-down .box").eq(idx).addClass("on").siblings(".map-down .box").removeClass("on");
    });
</script>
</body>

不是添加多个地图，只是切换显示地图上的信息框而已。
查看对应地图的js sdk文档，即可实现。

tab切换，在地图上展示多个markerhttps://blog.csdn.net/aoyoulai5633/article/details/101919862?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-101919862.pc_agg_new_rank&utm_term=html%E5%88%87%E6%8D%A2%E5%88%97%E8%A1%A8tab%E5%9C%B0%E5%9B%BE&spm=1000.2123.3001.4430

可以看一下有没有插件