map.html 地图页面
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css">
<title>Baidu Map </title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
th {
font-size: 12px;
text-align: center;
vertical-align: middle;
border: 1px solid #ddd;
}
#container {
height: 90%;
width: 80%;
left: 10%;
top: 3%;
border: 1px solid black;
}
.mydiv4 {
line-height: 20px;
border: 1px solid #0080FF;
background-color: #fff;
font-size: 20px;
z-index: 998;
width: 380px;
height: 220px;
right: 22%;
top: 20%;
margin-left: -25% !important;
margin-top: -10px !important;
margin-top: 0px;
position: fixed !important;
position: absolute;
overflow: auto;
}
#name {
text-align: center;
margin-left: auto;
margin-right: auto;
display: block;
font-size: 20px;
}
#colse {
float: right;
position: fixed;
}
table td {
width: 74px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 8px;
line-height: 1.42857143;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
vertical-align: middle;
border: 1px solid #ddd;
}
.cont {
width: 74px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=百度秘钥"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function showname() {
var otherComment = document.getElementsByClassName("showname"); //获取到的是一个类数组
for(var i = 0; i < otherComment.length; i++) {
if(otherComment[i].style.display == "none") {
otherComment[i].style.display = "block"; //显示
} else {
otherComment[i].style.display = "none"; //隐藏
}
}
}
function shownum() {
var otherComment = document.getElementsByClassName("shownum"); //获取到的是一个类数组
for(var i = 0; i < otherComment.length; i++) {
if(otherComment[i].style.display == "none") {
otherComment[i].style.display = "block"; //显示
} else {
otherComment[i].style.display = "none"; //隐藏
}
}
}
function showstar() {
var otherComment = document.getElementsByClassName("showstar"); //获取到的是一个类数组
for(var i = 0; i < otherComment.length; i++) {
if(otherComment[i].style.display == "none") {
otherComment[i].style.display = "block"; //显示
} else {
otherComment[i].style.display = "none"; //隐藏
}
}
}
function removeClassType($this) {
$($this).attr("title", $this.innerText);
}
</script>
</head>
<body>
<div>
<button onclick="showname()">名称</button>
<button onclick="shownum()">符合率</button>
<button onclick="showstar()">星级</button>
</div>
<div id="container"></div>
<script>
var map; // 地图主对象
var num;
var starR = "<span class='showstar' style='color:red;text-align: center;'>★★★★★★★★★★</span>";
var starP = "<span class='showstar' style='color:deeppink;text-align: center;'>★★★★★★★★★</span>";
var starY = "<span class='showstar' style='color:yellow;text-align: center;'>★★★★★★★★</span>";
var starB = "<span class='showstar' style='color:blue;text-align: center;'>★★★★★★★</span>";
var starG = "<span class='showstar' style='color:green;text-align: center;'>★★★★★★</span>";
var myIconRed = new BMap.Icon("img/star-red.png", new BMap.Size(32, 32));
var myIconPink = new BMap.Icon("img/star-pink.png", new BMap.Size(32, 32));
var myIconYellow = new BMap.Icon("img/star-yellow.png", new BMap.Size(32, 32));
var myIconbule = new BMap.Icon("img/star-blue.png", new BMap.Size(32, 32));
var myIcongreen = new BMap.Icon("img/star-green.png", new BMap.Size(32, 32));
var opts = {
width: 150, //宽度
height: 40, //高度
enablemessage: true
};
var data = Area;
renderMap(data);
/**
* * 渲染地图事件
*
* @param data
* 服务端返回数据
*/
function renderMap(data) {
var jsonData = data.retData;
num = data.number;
map = new BMap.Map("container");
map.enableScrollWheelZoom(); // 启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); // 启用地图惯性拖拽，默认禁用
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
if(num > 0) {
var point = new BMap.Point('117.528948', '38.926127');
map.centerAndZoom(point, 16);
addMaker(jsonData, jsonData[0].longitude, jsonData[0].latitude);
}
}
function addMaker(jsonData, lng, lat) {
var markers = [];
var indexs = new Array();
for(var i = 0; i < num; i++) { // 经纬度信息不为空，对其进行定位显示
if(jsonData[i].longitude != "" && jsonData[i].latitude != "" && jsonData[i].longitude.length > 0 && jsonData[i].latitude.length > 0) {
var point = new BMap.Point(jsonData[i].longitude, jsonData[i].latitude);
var marker;
var grade = parseInt(jsonData[i].grade.replace(/%/, ""));
var text = "<span class='showname'>名称：" + jsonData[i].locationName + " <br/></span><span class='shownum'>符合率：" + jsonData[i].grade + "<br/></span>";
if(grade <= 74) {
text += starB;
marker = new BMap.Marker(point, { // 定位点设置标注
icon: myIconbule
});
indexs.push(i);
// 不合格添加点击事件
markers.push(marker);
} else if(grade >= 75 && grade <= 79) {
text += starG;
marker = new BMap.Marker(point, { // 定位点设置标注
icon: myIcongreen
});
indexs.push(i);
// 不合格添加点击事件
markers.push(marker);
} else if(grade >= 80 && grade <= 89) {
text += starY;
marker = new BMap.Marker(point, { // 定位点设置标注
icon: myIconYellow
});
indexs.push(i);
// 不合格添加点击事件
markers.push(marker);
} else if(grade >= 90 && grade <= 94) {
text += starP;
marker = new BMap.Marker(point, { // 定位点设置标注
icon: myIconPink
});
indexs.push(i);
// 不合格添加点击事件
markers.push(marker);
} else if(grade >= 95 && grade <= 100) {
text += starR;
marker = new BMap.Marker(point, {
icon: myIconRed
});
indexs.push(i);
// 不合格添加点击事件
markers.push(marker);
}
var label = new BMap.Label(text, {
offset: new BMap.Size(30, -10)
});
marker.setLabel(label);
map.addOverlay(marker); // 添加覆盖物
}
}
/**
* 闭包处理 给每个marker添加点击事件
*/
for(var i = 0; i < markers.length; i++) {
(function() {
var index = i;
markers[i].addEventListener('click', function() {
renderPicsForMarker(jsonData[indexs[index]]);
});
})();
}
}
function renderPicsForMarker(i) {
document.getElementById('name').innerHTML = i.locationName;
document.getElementById('depPointDiv').style.display = 'block';
//$("#loadingImg4").css("display", "block");
var $navHeadd = $("#navHeadd4"),
$tbb = $("#tbb4");
}
// 关闭事件
function closeDivFun4() {
document.getElementById('depPointDiv').style.display = 'none';
}
</script>
<div id="depPointDiv" class="mydiv4" style="display: none;">
<div style="height: 25px;float: right">
<button id="colse"><a href="javascript:closeDivFun4()">关闭</a></button>
</div>
<div style="height: 20px;">
<span id='name'></span>
</div>
<table id="LocationTable4" class="table table-bordered table-hover tables" style="table-layout: fixed;">
<thead id="navHeadd4">
<!--展示数据 -->
<tr>
<th class='active'>指标</th>
<th class='active'>是否达标</th>
<th style="width: 74px;" class='active'>问题描述</th>
<th class='active'>责任单位</th>
<th class='active'>查看</th>
</tr>
</thead>
<tbody id="tbb4">
<!--展示数据 -->
<tr>
<td onmousemove="removeClassType(this)">
1.有可供至少20人同时参加讲座或亲子活动的室内场所；
</td>
<td>达标</td>
<td></td>
<td>社区学校</td>
<td>
<a>查看</a>
</td>
</tr>
<tr>
<td onmousemove="removeClassType(this)">
2.有管理制度公示
</td>
<td>达标</td>
<td></td>
<td>社区学校</td>
<td>
<a>查看</a>
</td>
</tr>
<tr>
<td onmousemove="removeClassType(this)">
4.有专职、兼职或志愿者师资队伍；（教师名单必须公示)
</td>
<td>不达标</td>
<td>
<p class="cont">1.无专职、兼职或志愿者师资队伍公示</p>
<p class="cont">2.没有公示教师名单</p>
<p class="cont">3.无专职、兼职或志愿者师资队伍公示</p>
</td>
<td>社区学校</td>
<td>
<a>查看</a>
</td>
</tr>
<tr>
<td onmousemove="removeClassType(this)">
3.有年内家长课堂、亲子活动计划安排，以及今年已开展活动的活动记录、信息报道等文字、图片资料。
</td>
<td>达标</td>
<td></td>
<td>社区学校</td>
<td>
<a>查看</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
数据js文件
var Area={
"number": 9,
"retData": [
{
"id": "ff808081672011e301672eb45ecc4622",
"pointName": "社区家长学校",
"pointCode": "DWLX46",
"locationId": "ff808081672011e301672a71ad1c1279",
"locationName": "静安里社区社区家长学校",
"locationCode": "DWLX46035",
"quotaCode": "309401",
"quotaName": "1）规范建设社区家长学校",
"questionId": "ff808081672011e301672a71a8071144",
"questionCode": "30940104",
"questionName": "4.有专职、兼职或志愿者师资队伍；（教师名单必须公示）",
"optionCode": "0",
"optionName": "不达标",
"longitude": "117.656297",
"latitude": "39.050046",
"sequence": null,
"address": "静安里小区内,杭州道街老年人科学大学附近11米",
"isShowPosition": 0,
"grade": "88%",
"deduction": null,
"resourceList": null,
"departmentList": null
},
{
"id": "ff808081672011e301672ef690d84864",
"pointName": "城市社区",
"pointCode": "DWLX04",
"locationId": "ff808081672011e301672a71aaac11c7",
"locationName": "官港第一社区",
"locationCode": "DWLX04030",
"quotaCode": "306001",
"quotaName": "1）环境、设施完好整洁",
"questionId": "ff808081672011e301672a71a6f310f8",
"questionCode": "30600103",
"questionName": "3.设施更新及时，无市政设施老化、生活设施陈旧、破损、不配套现象，无院小路窄停车难、各类线缆凌乱，下水道堵塞、电线老化、楼房部分墙皮脱落或外墙斑驳等现象；",
"optionCode": "0",
"optionName": "不达标",
"longitude": "117.524207",
"latitude": "38.921783",
"sequence": null,
"address": "中国邮政储蓄银行(官港支行)附近3米",
"isShowPosition": 0,
"grade": "66%",
"deduction": null,
"resourceList": null,
"departmentList": null
},
{
"id": "ff808081672011e301672ef690e0487b",
"pointName": "城市社区",
"pointCode": "DWLX04",
"locationId": "ff808081672011e301672a71aaac11c7",
"locationName": "官港第一社区",
"locationCode": "DWLX04030",
"quotaCode": "304503",
"quotaName": "3）文体广场的建设和维护",
"questionId": "ff808081672011e301672a71a4af1055",
"questionCode": "30450302",
"questionName": "2.无被挪用或侵占现象。",
"optionCode": "0",
"optionName": "不达标",
"longitude": "117.514222",
"latitude": "38.916284",
"sequence": null,
"address": "官港溪谷林苑居住小区西南911米",
"isShowPosition": 0,
"grade": "99%",
"deduction": null,
"resourceList": null,
"departmentList": null
},
{
"id": "ff808081672011e301672ecb229d46ab",
"pointName": "城市社区",
"pointCode": "DWLX04",
"locationId": "ff808081672011e301672a71aaaf11c8",
"locationName": "官港第二社区",
"locationCode": "DWLX04031",
"quotaCode": "301604",
"quotaName": "4)加强学雷锋志愿服务站点建设。",
"questionId": "ff808081672011e301672a71a2970fb9",
"questionCode": "30160402",
"questionName": "2.有服务器材和设备（如药箱、雨伞等便民设施和工具）",
"optionCode": "1",
"optionName": "达标",
"longitude": "117.518204",
"latitude": "38.927438",
"sequence": null,
"address": "湖畔家园东北597米",
"isShowPosition": 0,
"grade": "93%",
"deduction": null,
"resourceList": null,
"departmentList": null
},
{
"id": "ff808081672011e301672ecb229d46b8",
"pointName": "城市社区",
"pointCode": "DWLX04",
"locationId": "ff808081672011e301672a71aaaf11c8",
"locationName": "官港第二社区",
"locationCode": "DWLX04031",
"quotaCode": "306001",
"quotaName": "1）环境、设施完好整洁",
"questionId": "ff808081672011e301672a71a6f910fa",
"questionCode": "30600105",
"questionName": "5.生活垃圾定点投放、分类收集，垃圾房、箱（桶）完好、整洁。",
"optionCode": "0",
"optionName": "不达标",
"longitude": "117.632825",
"latitude": "38.92659",
"sequence": null,
"address": "",
"isShowPosition": 0,
"grade": "86%",
"deduction": null,
"resourceList": null,
"departmentList": null
},
{
"id": "ff808081672011e301672ecb22ab46e7",
"pointName": "社区综合文化服务中心",
"pointCode": "DWLX09",
"locationId": "ff808081672011e301672a71abe41220",
"locationName": "官港第二社区综合文化服务中心",
"locationCode": "DWLX09029",
"quotaCode": "309402",
"quotaName": "2）规范建设社区未成年人活动室",
"questionId": "ff808081672011e301672a71a8ee114b",
"questionCode": "30940203",
"questionName": "3.未成年人专属或共享的活动场所有管理制度公示；",
"optionCode": "1",
"optionName": "达标",
"longitude": "117.508587",
"latitude": "38.913505",
"sequence": null,
"address": "",
"isShowPosition": 0,
"grade": "77%",
"deduction": null,
"resourceList": null,
"departmentList": null
},
{
"id": "ff808081672011e301672ef690e04882",
"pointName": "城市社区",
"pointCode": "DWLX04",
"locationId": "ff808081672011e301672a71aaac11c7",
"locationName": "官港第一社区",
"locationCode": "DWLX04030",
"quotaCode": "308101",
"quotaName": "宣传展示精神文明创建内容",
"questionId": "ff808081672011e301672a71a7a81128",
"questionCode": "30810103",
"questionName": "3.小区出入口显著位置设置“精神文明创建宣传栏”（宣传栏名称必须用这个名字），宣传栏内不得直接张贴海报，须有实质内容",
"optionCode": "0",
"optionName": "不达标",
"longitude": "117.528948",
"latitude": "38.920443",
"sequence": null,
"address": "尚海湾西苑西233米",
"isShowPosition": 0,
"grade": "88%",
"deduction": null,
"resourceList": null,
"departmentList": null
},
{
"id": "ff808081672011e301672ee651294821",
"pointName": "城市社区",
"pointCode": "DWLX04",
"locationId": "ff808081672011e301672a71aac111cd",
"locationName": "艾维诺社区",
"locationCode": "DWLX04036",
"quotaCode": "304701",
"quotaName": "1）公共场所文明行为情况",
"questionId": "ff808081672011e301672a71a50e1071",
"questionCode": "30470118",
"questionName": "18.机动车停放整齐有序。",
"optionCode": "0",
"optionName": "不达标",
"longitude": "117.532119",
"latitude": "38.926127",
"sequence": null,
"address": "艾维诺森林西北561米",
"isShowPosition": 0,
"grade": "83%",
"deduction": null,
"resourceList": null,
"departmentList": null
},
{
"id": "ff808081672011e301673424442e63c3",
"pointName": "城市社区",
"pointCode": "DWLX04",
"locationId": "ff808081672011e301672a71aa9811c1",
"locationName": "丹东里社区",
"locationCode": "DWLX04024",
"quotaCode": "306001",
"quotaName": "1）环境、设施完好整洁",
"questionId": "ff808081672011e301672a71a6ef10f7",
"questionCode": "30600102",
"questionName": "2.居民文明养宠物，无宠物随地大小便，无遛狗时不拴狗链，践踏公共绿地等的情况。",
"optionCode": "0",
"optionName": "不达标",
"longitude": "117.661465",
"latitude": "38.92783",
"sequence": null,
"address": "丹东里内,大光明眼镜店(江苏路)东北95米",
"isShowPosition": 0,
"grade": "85%",
"deduction": null,
"resourceList": null,
"departmentList": null
}
]
}
效果
扫一扫
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
