1. 程式人生 > >高德地圖自適應(setFitView)部分Marker顯示

高德地圖自適應(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>