1. 程式人生 > >百度地圖API多行政區域劃分

百度地圖API多行政區域劃分

<!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="http://api.map.baidu.com/api?v=2.0&ak=你的祕鑰n"></script>
	<title>新增行政區劃</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地圖API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(113.363765, 23.134850), 10);
	map.enableScrollWheelZoom();
  map.setMapStyle({
  styleJson:[
          {
                    "featureType": "background",
                    "elementType": "all",
                    "stylers": {
                              "color": "#212121"
                    }
          },
          {
                    "featureType": "road",
                    "elementType": "all",
                    "stylers": {
                              //"color": "#212121"
							   "visibility": "off"
                    }
          },
          {
                    "featureType": "label",
                    "elementType": "all",
                    "stylers": {
                              "color": "#212121"
							   //"visibility": "off"
                    }
          },
          {
                    "featureType": "boundary",
                    "elementType": "all",
                    "stylers": {
                              "color": "#ffffff"
                    }
          },
          {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": {
                              //"color": "#ffffff"
							  "visibility": "off"
                    }
          }
]
});
  cityJSONZ=[{"name":"天河區","color": "#9F79EE"},
             {"name":"白雲區","color": "#9F79EE"},
			 {"name":"越秀區","color": "#9F79EE"},
			 {"name":"黃埔區","color": "#9F79EE"},
			 {"name":"蘿崗區","color": "#9F79EE"},
			 {"name":"從化市","color": "#9F79EE"},
			 {"name":"增城市","color": "#9F79EE"},
			 {"name":"番禺區","color": "#9F79EE"},
			{"name":"花都區","color": "#9F79EE"},
			{"name":"南沙區","color": "#9F79EE"},
             {"name":"海珠區","color": "#9F79EE"}];
var city = new Array();
for(var i=0;i<cityJSONZ.length;i++){
var cityJSON={};
cityJSON.name=cityJSONZ[i].name;
  cityJSON.color=cityJSONZ[i].color;
city.push(cityJSON);
}
for(var i=0;i<city.length;i++){
    getBoundary(city[i]);
} 

	function getBoundary(city){    
      var jsonObj = city ; //使用eval解析成物件
      var bdary = new BMap.Boundary();
    bdary.get(jsonObj.name, function(rs){      //獲取行政區域
			//map.clearOverlays();        //清除地圖覆蓋物       
			var count = rs.boundaries.length; //行政區域的點有多少個
			if (count === 0) {
				alert('未能獲取當前輸入行政區域');
				return ;
			}
          	var pointArray = [];
			for (var i = 0; i < count; i++) {
				var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ffffff"}); //建立多邊形覆蓋物
				map.addOverlay(ply);  //新增覆蓋物
				//pointArray = pointArray.concat(ply.getPath());
			}    
			//map.setViewport(pointArray);    //調整視野                 
		});   
	}

var tianhe=new BMap.Point (113.367062,23.130754),
yuexiu=new BMap.Point (113.273638,23.135805);
var marker=new BMap.Marker(tianhe, {
  // 指定Marker的icon屬性為Symbol
  icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
    scale: 1.5,//圖示縮放大小
    fillColor: "red",//填充顏色
    fillOpacity: 1//填充透明度
  })
});
map.addOverlay(marker);

marker.setAnimation(BMAP_ANIMATION_BOUNCE);

var point1=[tianhe,yuexiu];
var curve1 = new BMapLib.CurveLine(point1, {strokeColor:"yellow",strokeWeight:10, strokeOpacity:0.8});
map.addOverlay(curve1);
	curve.enableEditing(); //開啟編輯功能

	
</script>