<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tHlcp8kr3HFLuns9semvXvQKvq9ceLin"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<script src="${ctxPath}/static/js/plugins/layer/layer.js"></script>
<script src="${ctxPath}/static/js/common/Feng.js"></script>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script type='text/javascript'>
var map = new BMap.Map("container",{minZoom : 7, maxZoom : 18 }); // 创建Map实例
//绘制地图，增加遮罩
function drowMap(city,centerPoint,zoom) {
map.centerAndZoom(centerPoint, zoom); // 初始化地图,设置中心点座标和地图级别
map.enableScrollWheelZoom();
var mapType1 = new BMap.MapTypeControl(
{
mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT
}
);
// 地图自定义样式
map.setMapStyle({
styleJson: [{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
}, {
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#e7e4dc"
}
}, {
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
}]
});
var overView = new BMap.OverviewMapControl();
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
map.addControl(mapType1); //2D图，混合图
map.addControl(overView); //添加默认缩略地图控件
map.addControl(overViewOpen); //右下角，打开
var name = '甘肃省';
if(city){name=city}
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250)}));
var bdary = new BMap.Boundary();
bdary.get(name, function (rs) { //获取行政区域
var EN_JW = "180,90;"; //东北角
var NW_JW = "-180,90;"; //西北角
var WS_JW = "-180,-90;"; //西南角
var SE_JW = "180,-90;"; //东南角
//4.添加环形遮罩层
var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "#061537",strokeWeight:0.1, fillOpacity:0.8, strokeOpacity: 0.5 }); //建立多边形覆盖物
map.addOverlay(ply1);
});
}
//编写自定义函数,创建标注
function addMarker(point, label) {
//使用自定义图标做标注点，宽高为8 10
var myIcon = new BMap.Icon("marker_red_sprite2.png", new BMap.Size(8, 10));
var marker = new BMap.Marker(point);
marker.setLabel(label);
map.addOverlay(marker); // 将标注添加到地图中
//跳动效果
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
marker.addEventListener("click",function(e){
// map.openInfoWindow(infoWindow,point); //开启信息窗口
var index = layer.open({
type: 2,
title: '添加report_analysis',
area: ['800px', '420px'], //宽高
fix: false, //不固定
maxmin: true,
content: Feng.ctxPath + '/reportAnalysis/reportAnalysis_add'
});
this.layerIndex = index;
});
}
//自定义控件
function copyright(){
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); //设置版权控件位置
map.addControl(cr); //添加版权控件
var bs = map.getBounds(); //返回地图可视区域
cr.addCopyright({id: 1, content: "<div style='color:#fff;font-weight: bold;font-size: 20px;margin: 0 auto'><span οnclick='setChange(1)'>重点企业</span> <span οnclick='setChange(2)'>重点项目</span></div>", bounds: bs});
}
//请求获取-----开始
//1.默认加载省级地图
drowMap("甘肃省",new BMap.Point(101.728859,38.384855),8);
// 2.使用省级区域获取企业标记点
addMarker(new BMap.Point(103.881032,36.069115),"企业标记");
copyright();
function setChange(type){
map = new BMap.Map("container",{minZoom : 7, maxZoom : 18 });
if(type==1){
drowMap("兰州市",new BMap.Point(103.881032,36.069115),10);
}else{
drowMap("甘肃省",new BMap.Point(101.728859,38.384855),7);
}
addMarker(new BMap.Point(103.881032,36.069115),"企业标记");
copyright();
}
</script>
</body>