0efd4585 by 任超

feat:选择区域

1 parent 159c51b6
......@@ -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;
......@@ -120,4 +136,9 @@
}
.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">
......