高德地图自适应(setFitView)部分Marker显示

最新推荐文章于 2025-04-03 15:46:28 发布

chenjing928

最新推荐文章于 2025-04-03 15:46:28 发布

阅读量3.1w

点赞数 5

分类专栏：地图API 文章标签：高德地图API

本文链接：https://blog.youkuaiyun.com/chenjing928/article/details/80367320

版权

地图API 专栏收录该内容

5 篇文章

订阅专栏

高德地图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>