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