百度地图省市二级联动（一）

矫情吗；* 2022-05-21 11:38 355阅读 0赞

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

项目需求，点击一级省份进入二级市展示数据。半成品，我会继续完善。