高德地圖自適應(setFitView)部分Marker顯示
高德地圖API提供了一個自適應的方法——setFitView,效果就是可以自動適應顯示你想顯示的範圍區域,舉個簡單的應用場景,比如一個點在海南,另一個點在東北,那麼使用了這個方法,顯示的將是從南到北的整個中國區域,而如果是一個點在天安門,另一個在故宮,使用這個方法後,那麼顯示的只會是二環內的區域了。
那麼問題是,如果我本來地圖上就有很多點,預設顯示 區域為整個北京,但是我從資料庫中取出的資料的幾個點僅僅只在三環內,如何在取出資料後,自適應的只顯示到這部分的幾個點呢?
----------------------------------------------------------------------------------------------------------------------
setFitView(overlayList:Array)根據地圖上新增的覆蓋物分佈情況,自動縮放地圖到合適的視野級別,引數overlayList預設為當前地圖上新增的所有覆蓋物圖層
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
思路:
1.把想自適應的部分的點裝在一個透明的覆蓋物圖層裡
1.1根據這些點建立一個多邊形(前提是這個地圖中沒有其他的多邊形)
1.2把該多邊形透明化,包括允許事件穿透到地圖上
1.3獲取多邊形圖層
2.使用setFitView方法
程式碼:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>多邊形</title> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值"></script> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> </head> <body> <div id="container"> </div> <script type="text/javascript"> var map = new AMap.Map("container",{ resizeEnable:true, zoom:12, center:[116.397428, 39.90923] }) //東北 var m = new AMap.Marker({ position: [121.851547,52.762852], map:map }); //海南 var m2 = new AMap.Marker({ position: [109.439743,18.529034], map:map }); //希望自適應展示的部分的點 var markers = [], positions = [[116.405467, 39.907761], [116.415467, 39.907761], [116.415467, 39.917761], [116.425467, 39.907761], [116.385467, 39.907761]]; for (var i = 0, marker; i < positions.length; i++) { marker = new AMap.Marker({ map: map, icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b'+(i+1)+'.png', position: positions[i] }); markers.push(marker); } //------------------------------------ // map.setFitView(); 如果直接這樣寫,預設是把東北和海南的點都展示出來, //但是希望只自適應的展示markers裡的5個點 //----------------------------------------------------------------------------------------------------- //1.把想自適應的部分的點裝在一個透明的覆蓋物圖層裡 var polygon = new AMap.Polygon({ path : positions, //以5個點的座標建立一個隱藏的多邊形 map:map, strokeOpacity:0,//透明 fillOpacity:0,//透明 bubble:true//事件穿透到地圖 }); var overlaysList = map.getAllOverlays('polygon');//獲取多邊形圖層 //2.使用setFitView方法 map.setFitView(overlaysList);//自適應顯示 </script> </body> </html>