1. 程式人生 > >高德地圖顯示多個多邊形框

高德地圖顯示多個多邊形框


<!--高德地圖開始  -->		
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=""你的key"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<!--高德地圖結束  -->

/**
位置
*  <div id="container"></div>
*/

window.onload = function() {
	var map = new AMap.Map('container', {
	    resizeEnable: true,
	    center: [104.097764,30.674122],//中心位置
	    zoom: 16
	});
     var polygonOptions = {
            map: map,
            strokeColor: '#97EC71',
            strokeWeight: 2,
            fillColor: '#D1B3E3',
            fillOpacity: 0.7
        }; 
   //土地
   /**
  * 後臺傳來的map集合 裡面是list
  */
   <c:forEach items="${mapList.LandApp}" var="l">
		var zbArr="${l.coord}";
		var fillColor="${l.fillColor}";
		adfas(zbArr,fillColor);
	</c:forEach>
   //專案
 <%--  <c:forEach items="${mapList.ProjectApp}" var="l">
		var zbArr="${l.coord}";
		var fillColor="${l.fillColor}";
		adfas(zbArr,fillColor);
	</c:forEach> --%>
   //樓宇
 <%-- 	<c:forEach items="${mapList.BuildingApp}" var="l">
		var zbArr="${l.coord}";
		var fillColor="${l.fillColor}";
		adfas(zbArr,fillColor);
	</c:forEach> --%>
	function adfas(zbArr,fillColor){
		if(zbArr!=null&&zbArr.length>0){
			console.log(zbArr);
		     var zbArr2 = zbArr.split(',');
			    //遍歷取得的資料庫座標欄位,將字串轉換成地圖需要的座標陣列(二維陣列)
			    var polygonAr = new Array(); //
			 	for(var i=0;i < zbArr2.length; i++){
				if(i%2==0){
// 					var aArr=[];
// 					aArr.push(Number(zbArr2[i]));
// 					aArr.push(Number(zbArr2[i+1]));
					polygonAr.push(new AMap.LngLat(zbArr2[i],zbArr2[i+1]));
				}
				} 
// 				for(var i=0;i < zbArr2.length; i+=2){
// 					polygonAr.push(new AMap.LngLat(zbArr2[i], zbArr2[i+1]));
// 				}
			    aafsas(polygonAr,fillColor);
		}
	}
	function aafsas(polygonAr,fillColor){
		console.log(polygonAr);
		var  polygon = new AMap.Polygon({
		    path: polygonAr,//設定多邊形邊界路徑
		    strokeColor: fillColor, //線顏色
		    strokeOpacity: 0.2, //線透明度
		    strokeWeight: 3,    //線寬
		    fillColor: fillColor, //填充色
		    fillOpacity: 0.35//填充透明度
		});
		polygon.setMap(map);
	} 
	map.setFitView();
}