设置地图使其与指定范围相符示例

此示例展示如何设置地图使其与指定范围相符。

点击上面的几个按钮,会改变圆形区域大小,无论圆形区域如何变化,都能正好将它完整显示在地图中。

关键代码

    var myOptions = {
      zoom: 12,
      center: myMapCenter,
	  maxLevel:12,
	  bounds:myBounds
    }
	...
	map.fitBounds(myBounds,maxLevel);

代码解析

地图初始化时,在MapOptions参数中设置bounds,则地图自动调整,使得地图显示指定的区域。

方便初始化地图时直接显示某个范围的区域,避免先加载不必要的数据。

如果同时设置bounds和center,则bounds优先级高,忽略center。

如果要无法预期bounds会使多大,为了避免调整级数过大,可以使用maxLevel来限制。

maxLevel用于限制有bounds参数时的最大级数,缺省则不限制。无bounds参数时此参数无效

如:下面的例子中,center参数不起作用;而且无论范围多大,会限制最大只能显示到第12级。

	var myOptions = {
      zoom: 12,
      center: myMapCenter,
	  maxLevel:12,
	  bounds:myBounds
    }
	

如果要在地图创建后设置地图使其与指定范围相符,可以调用以下方法:

map.fitBounds()

两个参数与上面的参数作用相同。


		//设置圆半径
		circle.setRadius(radius);
		//重新计算范围bounds
		myBounds=myConvertor.bounds(myMapCenter,radius);
		//调整地图使其与指定范围相符
		//maxLevel用于限制调整的最大级数,不赋值则不限制。
		map.fitBounds(myBounds,maxLevel);

	

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<title>搜狗地图 JavaScript API 示例: 设置地图使其与指定范围相符示例</title>
<script type="text/javascript" src="//api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript">

  function initialize() {
	//本实例演示如何使地图 与指定中心和半径的圆范围 相符。
	//即让整个圆正好显示在地图中

	//先定义中心坐标点
    var myMapCenter = new sogou.maps.Point(12949492,4837126);
	//定义半径500米
	var myRadius=500;
	//用Convertor计算出这个圆的范围Bounds
	var myConvertor=new sogou.maps.Convertor();
	var myBounds=myConvertor.bounds(myMapCenter,myRadius);
	//设置地图参数
    var myOptions = {
      //zoom: 12,
      //center: myMapCenter,
	  //maxLevel用于限制有bounds参数时的最大级数,缺省则不限制。无bounds参数时此参数无效。
	  //即如果设置了maxLevel:12,则所指定的bounds自动调整级数时,不会大于第12级。
	  //maxLevel:12,
	  //如果同时设置bounds和center,则bounds优先级高,忽略center
	  bounds:myBounds
    }
	//初始化地图
    var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

	//将圆形区域画出来
	var circle=new sogou.maps.Circle({
        center:myMapCenter,
		radius:myRadius,
        map: map
    });
	//定义按钮调用的函数
	window.mapFitBounds=function(radius,maxLevel){
		//设置圆半径
		circle.setRadius(radius);
		//重新计算范围bounds
		myBounds=myConvertor.bounds(myMapCenter,radius);
		//调整地图使其与指定范围相符
		//maxLevel用于限制调整的最大级数,不赋值则不限制。
		map.fitBounds(myBounds,maxLevel);
	};

  }
</script>
</head>
<body onload="initialize()">
  <input type="button" value="圆半径5000米" onclick="mapFitBounds(5000)" />
  <input type="button" value="圆半径2000米" onclick="mapFitBounds(2000)" />
  <input type="button" value="圆半径1000米" onclick="mapFitBounds(1000)" />
  <input type="button" value="圆半径1000米,限制最大到12级" onclick="mapFitBounds(1000,12)" />
  <div id="map_canvas"></div>
</body>
</html>

运行代码