508f6fff by 焦小希
2 parents 4f925722 0efd4585
......@@ -107,9 +107,9 @@
</h2>
<a class="news-img" href="" title="图片新闻地信中心开展外业安全生产监控系统培训工作"><img src="staticImages/news_demo.jpg"
alt="图片新闻地信中心开展外业安全生产监控系统培训工作" /></a>
<ul>
<li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<ul id='ulNews'>
<li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
......@@ -570,6 +570,7 @@
</body>
</html>
<script src="./staticLib/jquery/jquery.min.js"></script>
<script src="./staticLib/layui/layui.js"></script>
<script src="./staticJs/staticIndex.js"></script>
<script src="https://at.alicdn.com/t/font_2174584_uxkon9mpq1.js"></script>
\ No newline at end of file
......
......@@ -29,4 +29,21 @@ layui.use('util', function () {
}
}
});
});
\ No newline at end of file
});
//初始化方法
$(function(){
NewsData();
});
function NewsData(){
//$.ajax()
var ulNews=$("#ulNews");
ulNews.empty();
var str='';
for(var i=0;i<6;i++){
str='<li><a href="#" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>';
ulNews.append(str);
}
}
\ No newline at end of file
......
......@@ -91,7 +91,7 @@ $(function () {
// 办事大厅标记
var marker = new BMap.Marker(new BMap.Point(108.95346, 34.265725));
var marker1 = new BMap.Marker(new BMap.Point(108.953381,34.256923));
var marker1 = new BMap.Marker(new BMap.Point(108.953381, 34.256923));
// 在地图上添加点标记
map.addOverlay(marker);
map.addOverlay(marker1);
......@@ -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">
......