利用SOSO地图API画矩形

Sam萨姆

于 2012-08-30 15:27:16 发布

阅读量1.1k

点赞数

分类专栏： GIS 文章标签： api delete function path button input

本文链接：https://blog.csdn.net/zzzzzzzert/article/details/7925454

版权

GIS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOSOMap</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#info {
    margin-top: 10px;
}
</style>
<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>
<script>
var arrayObj = new Array();　//创建一个数组
var temparrayObj = new Array();　//创建一个数组
var rectarrayObj = new Array();　//创建一个数组
var click_Num = 0;				//点击次数，每次重画前需要初始化
var init = function() {
		var center = new soso.maps.LatLng(39.916527,116.397128);
    var map = new soso.maps.Map(document.getElementById('container'),{
        center: center,
        zoomLevel: 13
    }); 
  
    var polygon = new soso.maps.Polygon({    	
     	path:temparrayObj,
        //path:path1,
        strokeColor: '#000000',
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: '#111111',
        fillOpacity: 0.2,
        map: map
    });
    
    var polyline = new soso.maps.Polyline({
        path: rectarrayObj,
        strokeColor: '#000000',
        strokeWeight: 2,
        strokeOpacity: 1,
        editable:false,
        map: map
    });
    
    document.getElementById("btn").οnclick=function(){
			click_Num = 0;   
			polygon.setVisible(false);
			polyline.setVisible(false);
    };  
   
   polyline.setStrokeDashStyle("dash");
    var poly_lat;
    var poly_lng;
    var temp_point;
    var listener;
    var listener_click = soso.maps.Event.addListener(map,"click",function(e){
    	click_Num = click_Num + 1;
    	poly_lat=e.latLng.getLat();		//获取圆心纬度
	    poly_lng=e.latLng.getLng();
	    if (click_Num == 1) //第一次点击时，将四个点都初始化为点击的坐标
	    {   
	    	var point1=new soso.maps.LatLng(poly_lat,poly_lng);
	    	var i = 0;

		    while(rectarrayObj.length < 4)
		    {
		    	rectarrayObj.push(point1);
		    }  	
		    rectarrayObj[0] = point1;

		    while(temparrayObj.length < 5)
		    {
		    	temparrayObj.push(point1);
		    }  	
		    
		    temparrayObj[0] = point1;
		    temparrayObj[4] = point1;
		    delete point1;

		    listener=soso.maps.Event.addListener(map,"mousemove",function(e1){
		    	if (click_Num == 1) {//在第一次和第二次点击之间，将其他三个点和当前点之间计算矩形
			    	poly_lat=e1.latLng.getLat();	
			    	poly_lng=e1.latLng.getLng();
			    	temp_point = new soso.maps.LatLng(poly_lat, temparrayObj[0].getLng());
			    	temparrayObj[1] = temp_point;
			    	delete temp_point;
			    	temp_point = new soso.maps.LatLng(poly_lat, poly_lng);
			    	temparrayObj[2] = temp_point;
			    	delete temp_point;
			    	temp_point = new soso.maps.LatLng(temparrayObj[0].getLat(),	poly_lng);
			    	temparrayObj[3] = temp_point;
			    	delete temp_point;
			    	polyline.setPath(temparrayObj);
			    	polyline.setMap(map);
			    	polyline.setVisible(true);
			    }
	    	});

	    }
	    else if(click_Num == 2){//第二次点击后，固定该矩形
	    	poly_lat=e.latLng.getLat();	
	    	poly_lng=e.latLng.getLng();
	    	temp_point = new soso.maps.LatLng(poly_lat, rectarrayObj[0].getLng());
			  rectarrayObj[1] = temp_point;
			  delete temp_point;
			  temp_point = new soso.maps.LatLng(poly_lat, poly_lng);
			  rectarrayObj[2] = temp_point;
			  delete temp_point;
			  temp_point = new soso.maps.LatLng(rectarrayObj[0].getLat(),	poly_lng);
			  rectarrayObj[3] = temp_point;
			  delete temp_point;
			  polygon.setPath(rectarrayObj);
			  polygon.setMap(map);
			  polygon.setVisible(true);		
			  polyline.setVisible(false);	
			    
	    }	 
	}); 

}
</script>
</head>
<body onLoad="init()">
<div style="width:100%;height:600px" id="container"></div>
<div id="info">
	<p><button id="btn">点击开始</button></p>
</div>
</body>
</html>

Sam萨姆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用SOSO地图API画矩形

SOSOMap*{ margin:0px; padding:0px;}body, button, input, select, textarea { font: 12px/16px Verdana, Helvetica, Arial, sans-serif;}#info { margin-top: 10px;}va
复制链接

扫一扫

专栏目录