【工作】百度地图行政区着色

效果

1. 对洛阳市的区县着色(也可对省着色)。
2. 鼠标悬停变颜色
3. 点击色块事件
4. 显示区县名称

<script type="text/javascript">
    var map = new BMap.Map('allmap',{enableMapClick:false});  
        map.centerAndZoom(new BMap.Point(112.103152,34.433382), 10);  // 加载地图中心点和缩放级别
        map.enableScrollWheelZoom();
	//加载颜色
	madeBoundary();
	label();
	// 遍历通过 百度的 Boundary工具类拿到边界坐标
	/**
	* 区域着色
	*/
	function madeBoundary() {
		var datas = [];
		var bdary = new BMap.Boundary();
		var color = ["red","#a6fa68","#f639a8","#20b832","#a19632","#80aba9","#5fd5b5","#ddf50f","#73be97","#1212ba","#1bec73","#afb8e1","#d28e52","#fc7743","#6c848d"]
		$.get("请求地址",function(retData){
			for (var i = 0; i < retData.length; i++) {
				datas.push(retData[i].name+"-"+color[i]+"-"+retData[i].id); //根据业务拼接内容
			}
			for (var i = 0; i < datas.length; i++) {
				getBoundary(datas[i], bdary);
			}
		})
	}

	function getBoundary(data, bdary) {
		data = data.split("-");
		var areaName =data[0];
		var areaColor = data[1];
		var areaId =data[2];
		bdary.get(areaName, function (rs) {       //获取行政区域
			var count = rs.boundaries.length; //行政区域的点有多少个
			var ply ;
			for (var i = 0; i < count; i++) {
				ply = new BMap.Polygon(rs.boundaries[i], { 
					strokeWeight: 2,  //描边线的粗细程度
					strokeColor: "#ff0000", //描边线的颜色
					fillOpacity: 1,   //色块的透明度 可以是小数
					fillColor: areaColor  //着色的颜色
				}); //建立多边形覆盖物
				map.addOverlay(ply);  //添加覆盖物
				//======点击事件开始======
				ply.addEventListener('click', function () {
					console.log("点击了"+areaName)
				});
				//======点击事件结束======
				//======鼠标移入移出事件开始======
				ply.addEventListener('mouseover',function(){
					ply.setFillOpacity(0.7)  //我这里设置的是色块的透明度。如果设置颜色可以通过 setFillColor()函数
				});
				ply.addEventListener('mouseout',function(){
					ply.setFillOpacity(1);
				})
				//======鼠标移入移出事件结束======
			}

		})
	}

	/**
	* 显示区县名称
	*/
	function label(){
		var pointData = [
			"111.453409,34.33752-洛宁县",
			"112.024811,34.500912-宜阳县",
			"112.069526,34.088114-嵩县",
			"112.389557,34.123518-汝阳县",
			"112.470907,34.43386-伊川县",
			"112.5192,34.620567-洛龙区",
			"112.106686,34.854143-新安县",
			"112.470102,34.827744-孟津县",
			"112.558191,34.925177-吉利区",
			"112.420808,34.739125-老城区",
			"112.307329,34.636267-涧西区",
			"111.576601,33.929665-栾川县",
			"112.718448,34.639782-偃师市"

		]
		for(var i =0;i<pointData.length;i++){
			var  da = pointData[i].split("-");
			var zb = da[0];
			var qy = da[1];
			var xy = zb.split(",");
			var x = xy[0];
			var y = xy[1];
			var opts = {
				position: new BMap.Point(x, y), // 指定文本标注所在的地理位置
				offset: new BMap.Size(0, 0) // 设置文本偏移量
			};
			var label = new BMap.Label(qy, opts);
			label.setStyle({
				color: 'black',   //文本颜色
				//borderRadius: '5px',  
				border: "0px",    //边框线粗细。0px表示不显示 
				//borderColor: '#1fcc0c',
				backgroundColor: "0.000000000001", //边框背景色透明
				//padding: '10px',
				fontSize: '16px', 
				//height: '30px',
				//lineHeight: '30px',
				fontFamily: '微软雅黑'
			});
			map.addOverlay(label);
		};
	}

显示区域名效果不太好。各位如果有更好的显示效果的话可以交流下。谢谢