<!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>