判断信息点是否在指定范围内

此示例判断一些信息点是否在指定范围内,并用不同的图标在地图区标记出来。

关键代码

  function initialize() {

  	//取得bounds
  	var convertor=getInstance(sogou.maps.Convertor);
	var bounds=convertor.bounds(new sogou.maps.Point(bd[0],bd[1]),bd[2]);

  	//初始化地图
  	var myLatLng = new sogou.maps.Point(12957062,4827187);//LatLng(24.886436490787712, -70.2685546875);
  	var myOptions = {
  		zoom: 10,
  		center: myLatLng
  	};
  	var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

  	//画范围圆
  	var circleOptions = {
       		strokeColor: "#C8C8C8",
        	strokeOpacity: 0.8,
        	strokeWeight: 1,
        	fillColor: "#FFFFFF",
        	fillOpacity: 0.45,
        	map: map,
        	center: new sogou.maps.Point(bd[0],bd[1]),
        	radius: bd[2]
  	};
  	new sogou.maps.Circle(circleOptions);

	var fbds=new sogou.maps.Bounds(),pt,markerOptions;
  	var image = new sogou.maps.MarkerImage('//api.go2map.com/maps/images/v2.0/flag.png',
						new sogou.maps.Size(20, 32),new sogou.maps.Point(0,0),
						new sogou.maps.Point(0, 32),new sogou.maps.Size(20, 32));
	//绘制点同时判断是否在bounds范围内
	for (var i=0; i<ptsz; i++ )
	{
		pt=new sogou.maps.Point(pts[i][0],pts[i][1]);
		//MarkerOptions对象
		markerOptions={
			disableLabel:true,
			map: map,
			title: pts[i][2],
			position: pt,
			label:{visible:false,align:"BOTTOM"}
    		};
		//是否在范围类
		if(bounds.contains(pt)){
			markerOptions.icon=image;
		}else{
			markerOptions.styleId="S1980";
		}
		//画点
		new sogou.maps.Marker(markerOptions);
		fbds.extend(pt);
	}
	//调整视野,能看到全部点
	map.fitBounds(fbds);
  }
			

代码解析

信息点和视野范围。

  var pts=[
		[12949412,4837021,"科技大厦"],
		[12949480,4837103,"搜狐网络大厦"],
		[12949619,4837080,"卜蜂莲花"],
		[12948923,4837021,"文津国际酒店"],
		[12949626,4837617,"华业大厦"],
		[12950262,4836935,"优盛大厦"],
		[12949669,4836320,"财智国际大厦"]
	]
  var bd=[12949578,4836984,200];
			

首先获取bounds,确定范围。

  	//取得bounds
  	var convertor=getInstance(sogou.maps.Convertor);
	var bounds=convertor.bounds(new sogou.maps.Point(bd[0],bd[1]),bd[2]);
			

判断信息点是否在bounds范围内,设置使用不用的图标

		//设置标记样式
		markerOptions={
			disableLabel:true,
			map: map,
			title: pts[i][2],
			position: pt,
			label:{visible:false,align:"BOTTOM"}
    		};
		//是否在范围内
		if(bounds.contains(pt)){
			markerOptions.icon=image;
		}else{
			markerOptions.styleId="S1980";
		}
			

完整代码

<!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"/>
<title>搜狗地图 JavaScript API示例: bounds范围内点</title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:700px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script type="text/javascript" src="//api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript">

  var pts=[
		[12949412,4837021,"科技大厦"],
		[12949480,4837103,"搜狐网络大厦"],
		[12949619,4837080,"卜蜂莲花"],
		[12948923,4837021,"文津国际酒店"],
		[12949626,4837617,"华业大厦"],
		[12950262,4836935,"优盛大厦"],
		[12949669,4836320,"财智国际大厦"]
	]
  var bd=[12949578,4836984,200];

  //获取类的唯一示例
  function getInstance(a) {
    a.hasOwnProperty("_instance")||(a._instance = new a);
    return a._instance
  }

  function initialize() {

  	//取得bounds
  	var convertor=getInstance(sogou.maps.Convertor);
	var bounds=convertor.bounds(new sogou.maps.Point(bd[0],bd[1]),bd[2]);

  	//初始化地图
  	var myLatLng = new sogou.maps.Point(12957062,4827187);//LatLng(24.886436490787712, -70.2685546875);
  	var myOptions = {
  		zoom: 10,
  		center: myLatLng
  	};
  	var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

  	//画范围圆
  	var circleOptions = {
       		strokeColor: "#C8C8C8",
        	strokeOpacity: 0.8,
        	strokeWeight: 1,
        	fillColor: "#FFFFFF",
        	fillOpacity: 0.45,
        	map: map,
        	center: new sogou.maps.Point(bd[0],bd[1]),
        	radius: bd[2]
  	};
  	new sogou.maps.Circle(circleOptions);

	var fbds=new sogou.maps.Bounds(),pt,markerOptions;
  	var image = new sogou.maps.MarkerImage('//api.go2map.com/maps/images/v2.0/flag.png',
						new sogou.maps.Size(20, 32),new sogou.maps.Point(0,0),
						new sogou.maps.Point(0, 32),new sogou.maps.Size(20, 32));
	//绘制点同时判断是否在bounds范围内
	for (var i=0; i<ptsz; i++ )
	{
		pt=new sogou.maps.Point(pts[i][0],pts[i][1]);
		//MarkerOptions对象
		markerOptions={
			disableLabel:true,
			map: map,
			title: pts[i][2],
			position: pt,
			label:{visible:false,align:"BOTTOM"}
    		};
		//是否在范围内
		if(bounds.contains(pt)){
			markerOptions.icon=image;
		}else{
			markerOptions.styleId="S1980";
		}
		//画点
		new sogou.maps.Marker(markerOptions);
		fbds.extend(pt);
	}
	//调整视野,能看到全部点
	map.fitBounds(fbds);
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>
			

运行代码