feat:选择区域

@@ -103,12 +103,40 @@ $(function () {
     };
     var infoWindow = new BMap.InfoWindow('西安市大唐不夜城', opts);
     var infoWindow1 = new BMap.InfoWindow('南门', opts);
+    
     // 点标记添加点击事件
     marker.addEventListener('click', function () {
+        $('.office_halls li').removeClass('hallActive')
+        $('.office_halls li').eq(0).addClass('hallActive')
+        point = new BMap.Point(108.95346, 34.265725);
         map.openInfoWindow(infoWindow, point); // 开启信息窗口
     });
     marker1.addEventListener('click', function () {
+        $('.office_halls li').removeClass('hallActive')
+        $('.office_halls li').eq(1).addClass('hallActive')
+        point = new BMap.Point(108.953381, 34.256923);
         map.openInfoWindow(infoWindow1, point); // 开启信息窗口
+
+        
     });
+    // 办事大厅点亮
+    $('.office_halls li').click(function () {
+        $('.office_halls li').removeClass('hallActive')
+        $(this).addClass('hallActive')
+        var index = $(this).index();
+        if (index == 1) {
+            point = new BMap.Point(108.95346, 34.265725);
+            map.openInfoWindow(infoWindow, point); // 开启信息窗口
+        } else if (index == 2) {
+            point = new BMap.Point(108.953381, 34.256923);
+            map.openInfoWindow(infoWindow1, point);
+        }
+    })
 
+    infoWindow.addEventListener('close', function (type, target, point) {
+        $('.office_halls li').eq(0).removeClass('hallActive')
+    })
+    infoWindow1.addEventListener('close', function (type, target, point) {
+        $('.office_halls li').eq(1).removeClass('hallActive')
+    })
 })
\ No newline at end of file

@@ -111,6 +111,22 @@
 .map_content {
     margin-top: 20px;
 }
+.office_halls {
+    width: 15%;
+    float: left;
+    margin-right: 2%;
+}
+.office_halls h2 {
+    font-weight: 600;
+    margin-bottom: 6px;
+}
+.office_halls li{
+    line-height: 28px;
+    cursor: pointer;
+}
+.office_halls li:hover {
+    color: #0091FF;
+}
 .footer_button {
     margin: 20px 0;
     text-align: center;
@@ -121,3 +137,8 @@
 .footer_button a { 
     color: #fff;
 }
+
+.hallActive {
+    background-color: rgb(236, 236, 236);
+    color: #0091FF;
+}
\ No newline at end of file

@@ -134,7 +134,12 @@
         </div>
         <!-- ----------------------------------地图api--------------------------------------------------- -->
         <div class="map_content contentBox">
-            <div id="container" style="width: 100%;height: 500px;"></div>
+            <ul class="office_halls">
+                <h2>请选择办事大厅</h2>
+                <li>大唐不夜城</li>
+                <li>南门永宁门</li>
+            </ul>
+            <div id="container" style="width: 80%;height: 500px;"></div>
         </div>
         <div class="footer_button">
             <button type="button" class="layui-btn layui-btn-normal">