求百度地图API把矩形覆盖物分成若干均等份

问题具体介绍在链接里，一下是我的代码部分：<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
div{margin:0px;padding:0px}
.left{float:left;}
.clear{clear:both;}
#container{height:80%;width:50%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

</head>

<body>
<div id="container" class="left"></div>
<div class="left">
<div><button class="mapBtn" onclick="startDivision()">开始切割</button></div>
<div><button class="mapBtn" onclick="stopDivision()">停止切割</button></div>
<div>矩形的四个点：<br>
左上角：<input type="text" id="leftUp"/>
右上角：<input type="text" id="rightUp"/><br>
左下角：<input type="text" id="leftDown"/>
右下角：<input type="text" id="rightDown"/><br>
上边距离：<input type="text" id="upDistance"/><br>
下边距离：<input type="text" id="downDistance"/><br>
左边距离：<input type="text" id="leftDistance"/><br>
右边距离：<input type="text" id="rightDistance"/><br>
横向网格数：<input type="text" id="right"/><br>
纵向网格数：<input type="text" id="left"/>
<button>生成地图区域</button>
</div>
</div>
<div class="clear"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
//var point = new BMap.Point(120.159636,30.272592);
//map.centerAndZoom(point,16);
map.centerAndZoom("杭州", 11);
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.enableInertialDragging();

var pt1 = new BMap.Point(0,0);
var pt2 = new BMap.Point(0,0);
var pt3 = new BMap.Point(0,0);
var pt4 = new BMap.Point(0,0);
//var isTopLeft=false,isRightBottom=false;
var isMouseDown=false;
var defalutCursor;
var isDivision=false;

// 返回IE版本号
  var ieVersion = 0;
  if (/msie (\d+\.\d)/i.test(navigator.userAgent)) {
      ieVersion = document.documentMode || + RegExp['\x241']
  }

// var leftUp;
// var rightUp;
//  var leftDown;
//  var rightDown;

map.addEventListener("mousedown", function(e){
if(!isDivision){return;}
    // 由于在IE和非IE浏览器下，e对象对鼠标按下键的返回值不一样
    // 所以需要分两种情况判断，当不是鼠标左键时，返回无操作
    var e1 = window.event || e;
    if (e1.button != 0 && !ieVersion || ieVersion && e1.button != 1){
     return;
    }
    pt1.lng = e.point.lng;
    pt1.lat = e.point.lat;
    isMouseDown = true;
    document.getElementById('leftUp').value = pt1.lng+','+pt1.lat;
    var rect = new BMap.Polygon([pt1]);
    rect.setPositionAt(0,pt1);
    return leftUp;
});

map.addEventListener("mousemove", function(e){
if(!isMouseDown || !isDivision){return;}

pt2.lng = e.point.lng;
pt2.lat = pt1.lat;
pt3.lng = e.point.lng;
pt3.lat = e.point.lat;
pt4.lng = pt1.lng;
pt4.lat = e.point.lat;

map.clearOverlays();

var rect = new BMap.Polygon([pt1,pt2,pt3,pt4]);
rect.setStrokeWeight(2);
rect.setStrokeOpacity(0.8);
rect.setStrokeColor("red");
rect.setFillColor("white");
rect.setFillOpacity(0.5); map.addOverlay(rect);
document.getElementById('rightUp').value = pt3.lng+','+pt3.lat;
document.getElementById('leftDown').value = pt4.lng+','+pt4.lat;
document.getElementById('rightDown').value = pt2.lng+','+pt2.lat;
var leftUp = new BMap.Point(pt1.lng, pt1.lat);
var rightUp = new BMap.Point(pt3.lng,pt3.lat);
var leftDown = new BMap.Point(pt4.lng, pt4.lat);
var rightDown = new BMap.Point(pt2.lng,pt2.lat);
//获得矩形四边的距离
var upDistance = map.getDistance(leftUp,rightUp);
var downDistance = map.getDistance(leftDown,rightDown);
var leftDistance = map.getDistance(leftUp,leftDown);
var rightDistance = map.getDistance(rightUp,rightDown);

document.getElementById('upDistance').value = upDistance;
document.getElementById('downDistance').value = downDistance;
document.getElementById('leftDistance').value = leftDistance;
document.getElementById('rightDistance').value = rightDistance;
//document.write(rightDistanc);
});

var demo = document.getElementById("container");
demo.onmouseup = function(e){
   isMouseDown = false;
  }
// var rightDistance = map.getDistance(rightUp,rightDown);
// document.getElementById('rightDistance').value = rightDistance;

function startDivision(){
defalutCursor = map.getDefaultCursor();
map.setDefaultCursor("crosshair");
map.disableDragging();
isDivision = true;
}

function stopDivision(){
map.setDefaultCursor(defalutCursor);
map.enableDragging();
isDivision = false;
}

</script>
</body>
</html>

调试易

求百度地图API把矩形覆盖物分成若干均等份

解决方案 »