<!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>
08-15
08-15
08-15