<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/head.css"/>
<link rel="stylesheet" href="css/wuqi.css"/>
<link rel="stylesheet" href="css/media.css"/>
<link rel="icon" href="images/icon.ico"/>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Q7hhQzxGQt1Ea0Gg1crZjrSWvtY9eqkR"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<!-- 加载城市列表 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<!-- <script type="text/javascript" src="js/echarts.min.js"></script>-->
</head>
<body>
<nav class="navbar navbar-inverse ">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/icon.png" alt="" width="70" height="70"/></a>
<ul class="nav navbar-nav intro">
<li>
<p>地区：杭州西湖区</p>
<div>角色：古荡X警员
<div class="intros">
<img src="images/icon.png" alt="" class="pull-left col-xs-4 "/>
<div class="pull-right col-sm-8">
<p>用户 : <span> Test</span></p>
<p>地区 : <span>杭州市西湖区</span></p>
<p>角色 : <span>警员级</span></p>
<p>版本 : <span>年费版</span></p>
<p>到期 : <span>2019年10月8日</span></p>
<a href="schedule.html" class="btn btn-default">进度反馈</a>
<a href="change_pass.html" class="btn btn-default">修改密码</a> <a href="land.html" class="btn btn-default">退出</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="text-center head">P2P企业风险监测平台</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="news.html">灵境资讯</a></li>
<li><a href="risk_warning.html">风险预警</a></li>
<li><a href="Preview_area.html">区域概览</a></li>
<li><a href="infor_submit.html">情报提交</a></li>
<li><a href="Risk_query.html" >风险查询</a></li>
<li><a href="w.html" class="Hactive">武器库</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="content1">
<div id="container" style="width: 100%;height: 100%"></div>
<!--<div class="sel_container"><strong id="curCity">杭州市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div>
<div class="map_popup" id="cityList" style="display:none;">
<div class="popup_main">
<div class="title">城市列表</div>
<div class="cityList" id="citylist_container"></div>
<button id="popup_close"></button>
</div>
</div>-->
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container", { enableMapClick: true });
/* var point = new BMap.Point(120.382029,30.312903);*/
var point = '杭州市';
map.centerAndZoom(point,9);
map.enableScrollWheelZoom(true);
var marker = new BMap.Marker(point);
//增加标注的位置
var mapPoints = [
{x:30.312903,y:120.382029,branch:"新新贷1"},
{x:30.215855,y:120.024568,branch:"新新贷2"},
{x:30.18015,y:120.174968,branch:"新新贷3"},
{x:30.324994,y:120.164399,branch:"新新贷4"},
{x:30.24884,y:120.305074,branch:"新新贷5"}
];
var i = 0;
map.addOverlay(marker);
// 函数 创建多个标注
function markerFun (points,label,infoWindows) {
var markers = new BMap.Marker(points);
map.addOverlay(markers);
markers.setLabel(label);
markers.addEventListener("mouseover", function(){
label.setStyle({ //给label设置样式，任意的CSS都是可以的
display:"block"
});
});
markers.addEventListener("mouseout", function(){
label.setStyle({ //给label设置样式，任意的CSS都是可以的
display:"none"
});
});
}
for (;i<mapPoints.length;i++) {
var points = new BMap.Point(mapPoints[i].y,mapPoints[i].x);//创建坐标点
var opts = {
width:250,
height: 100,
title:mapPoints[i].name
};
var label = new BMap.Label(mapPoints[i].branch,{
offset:new BMap.Size(10,-5),
position:point,
});
label.setStyle({
'display':'none',
'color':'black',
'border':'1px solid gray',
'height':'20px',
'padding':'5px 10px',
'lineHeight':'10px',
'textAlign':'center',
'maxWidth':"none",
'background':'rgb(255, 237, 186)'
});
// var infoWindows = new BMap.InfoWindow(mapPoints[i].con,opts);
markerFun(points,label);
}
// 给城市列表上的关闭按钮添加点击操作
function getBoundary1(){
// var city=point;
var bdary = new BMap.Boundary();
bdary.get(point, function(rs){ //获取行政区域
// map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000",fillColor:'transparent'}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
/* addlabel();*/
});
}
getBoundary1();
var blist = [];
var districtLoading = 0;
function getBoundary() {
addDistrict("浙江省");
}
getBoundary();
/**
* 添加行政区划
* @param {} districtName 行政区划名
* @returns 无返回值
*/
function addDistrict(districtName) {
//使用计数器来控制加载过程
districtLoading++;
var bdary = new BMap.Boundary();
bdary.get(districtName, function (rs) { //获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return;
}
for (var i = 0; i < count; i++) {
blist.push({ points: rs.boundaries[i], name: districtName });
};
//加载完成区域点后计数器-1
districtLoading--;
if (districtLoading == 0) {
//全加载完成后画端点
drawBoundary();
}
});
}
function drawBoundary() {
//包含所有区域的点数组
var pointArray = [];
/*画遮蔽层的相关方法
*思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
* 这样就做出了一个经过多次西北角的闭合多边形*/
//定义中国东南西北端点，作为第一层
var pNW = { lat: 59.0, lng: 73.0 };
var pNE = { lat: 59.0, lng: 136.0 };
var pSE = { lat: 3.0, lng: 136.0 };
var pSW = { lat: 3.0, lng: 73.0 };
//向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
var pArray = [];
pArray.push(pNW);
pArray.push(pSW);
pArray.push(pSE);
pArray.push(pNE);
pArray.push(pNW);
//循环添加各闭合区域
for (var i = 0; i < blist.length; i++) {
//添加显示用标签层
var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });
label.hide();
map.addOverlay(label);
//添加多边形层并显示
var ply = new BMap.Polygon(blist[i].points, {fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物
ply.name = blist[i].name;
ply.label = label;
map.addOverlay(ply);
//添加名称标签层
var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) });
centerlabel.setPosition(ply.getBounds().getCenter());
map.addOverlay(centerlabel);
//将点增加到视野范围内
var path = ply.getPath();
pointArray = pointArray.concat(path);
//将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
pArray = pArray.concat(path);
pArray.push(pArray[0]);
}
//限定显示区域，需要引用api库
var boundply = new BMap.Polygon(pointArray);
BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
// map.setViewport(pointArray); //调整视野
//添加遮蔽层
var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 0.9 }); //建立多边形覆盖物
map.addOverlay(plyall);
}
/* setTimeout(function () {
getBoundary();
}, 100);
*/
</script>
</html>
