<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="json.js" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zga15SpUh7sMrZkXaBKicRBshkN3bKtR"></script>
<title>添加行政区划</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var oneDev = ["北京市","上海市","天津市","重庆市","黑龙江","辽宁省","吉林省","河北省","河南省","湖北省","湖南省","山东省","山西省","陕西省","安徽省","浙江省","江苏省","福建省","广东省","海南省","四川省","云南省","贵州省","青海省","甘肃省","江西省","台湾","广西","西藏","新疆","宁夏","内蒙古","香港","澳门"];
var colorArr = ['#ff541c','#1cecff','#3cff1c','#ff1c47','#eca13f','#fc4505','#424ff2'];
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.403765, 36.914850),5);
map.enableScrollWheelZoom(true);
map.disableScrollWheelZoom();//禁止滚轮放大缩小
map.disableDoubleClickZoom();//禁止双击放大
map.disableDragging();//禁止拖动
/*map.setMapStyle({//设置地图样式
styleJson:setMapJson
});*/
map.setMapStyle({styleJson:setMapJson});
function ComplexCustomOverlay(point, text, mouseoverText){//添加自定义标注
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#EE5D5B";
div.style.border = "1px solid #BC3B3A";
div.style.color = "white";
div.style.height = "18px";
div.style.padding = "2px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px"
var span = this._span = document.createElement("span");
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that = this;
var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
map.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
//map.setMapType(BMAP_PERSPECTIVE_MAP); //三维地图
//mapInit();
boundary();
function boundary(){
for(var j in oneDev){
(function(index){
var bdary = new BMap.Boundary();
bdary.get(oneDev[index], function(rs){ //获取行政区域
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
for (var i = 0; i < count; i++) {
var color = colorArr[Math.floor(Math.random()*6+0)];
var ply = new BMap.Polygon(rs.boundaries[i], {fillColor:'#1447ed',strokeWeight: 1,fillOpacity: 0.4, strokeColor:'#1447ed'}); //建立多边形覆盖物
ply.name = jsonData[i].num;
map.addOverlay(ply); //添加覆盖物
ply.addEventListener('click',function(){
mapInit(oneDev[index],index)
})
}
//map.setViewport(pointArray); //调整视野
});
})(j)
}
for(var i in oneDev){//添加自定义标注
var pt = new BMap.Point(cityPos[i].lng+0.1,cityPos[i].lat-0.1);
var myCompOverlay = new ComplexCustomOverlay(pt,jsonData[i].name+jsonData[i].num);
map.addOverlay(myCompOverlay);
}
}
function mapInit(name,j){
map.clearOverlays();
var bdary = new BMap.Boundary();
bdary.get(name, function(rs){ //获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
for (var i = 0; i < count; i++) {
var color = colorArr[Math.floor(Math.random()*6+0)];
var plyOne = new BMap.Polygon(rs.boundaries[i], {fillColor: "#5acced", fillOpacity:0.5,strokeWeight: 1, strokeColor:'#222739'}); //建立多边形覆盖物
map.addOverlay(plyOne); //添加覆盖物
}
map.centerAndZoom(new BMap.Point(cityPos[j].lng, cityPos[j].lat),6);
});
if(jsonData[j].child){
for(var n in jsonData[j].child){
bdary.get(jsonData[j].child[n], function(rs){ //获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
for (var k = 0; k < count; k++) {
var color = colorArr[Math.floor(Math.random()*6+0)];
var plyOne = new BMap.Polygon(rs.boundaries[k], {fillColor: "#222739", fillOpacity:0.7,strokeWeight: 1, strokeColor:'#222739'}); //建立多边形覆盖物
map.addOverlay(plyOne); //添加覆盖物
}
map.centerAndZoom(new BMap.Point(cityPos[j].lng, cityPos[j].lat),6);
});
}
}else{
alert(2)
}
}
</script>百度地图 省市二级联动（一）
猜你喜欢
转载自blog.csdn.net/zhuoganliwanjin/article/details/80940584
今日推荐
周排行