高德地圖顯示多個多邊形框
阿新 • • 發佈:2018-12-13
<!--高德地圖開始 --> <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(); }