在地图上,如何对一个地区进行矩形划分

首先先看下效果图

主要是先根据百度百科确定北京区域所在的经纬度，然后计算大概。并且在地图上画矩形的经纬度顺序是

左,左上，右上,右，按照顺时针方向进行设置。如果顺序反了可能画出的就不是矩形了

本文是调用第三方高德的地图API。

下面给出源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
html { height:100% }
body { height:100%; margin:0px; padding:0px }
#container { height:100% }
</style>
<script type="text/javascript"
src="http://api.amap.com/webapi/init?v=1.1">
</script>
<script type="text/javascript">
function initialize() {
var mapObj = new AMap.Map("container"); // 创建地图实例
//var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标
// mapObj.setCenter(point); // 设置地图中心点坐标
//北京：北纬39度54分20秒，东经116度25分29秒；全市南北跨纬度1度37分，东西跨经度2度05分。
//北京区域所在经度
var leftX=117.2829,leftTopX=117.2829,rightTopX=115.2529,rightX=115.2529;
//北京区域所在纬度
var leftY=40.92220,leftTopY=39.2620,rightTopY=39.2620,rightY=40.92220;
//设置经纬度分为多少段
var partX=2,partY=2;
//计算经纬度相差数量
var differX=leftX-rightX;
var differY=leftY-leftTopY;
//计算经纬度每段间隔多少
var intervalX=differX/partX;
var intervalY=differY/partY;
// alert(intervalX+":"+intervalY);
//以上参数设置完毕后，这里是按照从左到右的顺序来确定各个区域的经纬度
var lX,lTopX,rTopX,rX;
var lY,lTopY,rTopY,rY;
var num=0;//设置多边形id
for(var i=0;i<=partX;i++){
for(var j=0;j<=partY;j++){
var arr = new Array();//经纬度坐标数组
lX= (leftX-intervalX*i).toString();
lTopX= (leftX-intervalX*i).toString();
rTopX= (leftX-intervalX*(i+1)).toString();
rX= (leftX-intervalX*(i+1)).toString();
lY= (leftY-intervalY*j).toString();;
lTopY= (leftY-intervalY*(j+1)).toString();
rTopY= (leftY-intervalY*(j+1)).toString();
rY= (leftY-intervalY*j).toString();
arr.push(new AMap.LngLat(lX,lY));
arr.push(new AMap.LngLat(lTopX,lTopY));
arr.push(new AMap.LngLat(rTopX,rTopY));
arr.push(new AMap.LngLat(rX,rY));
var polygon=new AMap.Polygon({
id:"polygon"+num,//多边形ID
path:arr,//多边形顶点经纬度数组
strokeColor:"#0000ff",//线颜色
strokeOpacity:0.2,//线透明度
strokeWeight:3, //线宽
fillColor: "#f5deb3",//填充色
fillOpacity: 0.35 //填充透明度
});
mapObj.addOverlays(polygon);
num++;
}
}
}
</script>
</head>
<body οnlοad="initialize()">
<div id="container"></div>
</body>
</html>

在源码中也有注释，如果有不明白的，可以留言咨询，谢谢大家。

在地图上,如何对一个地区进行矩形划分相关推荐

百度地图上自定义添加一个标注
在百度地图上,自定义添加一个标注,标注可以是自己的图片. 步骤:先确定你要标注的点的坐标–>创建一个添加标注的函数addMarker–>(1)在该函数中创建这个图标,并说明图标的来源(网址 ...
地图上必须要有指北针吗？
地图上必须要有指北针吗? 我之前也曾与知识星球中的老师讨论过这个问题(是的,我们星球里有好多位高校的老师),大家的结论一般都是"视情况而定,不是所有的地图都必须要有". 刚好最近也 ...
怎么在谷歌地图上画图_如何在Google地图上规划具有多个目的地的公路旅行
怎么在谷歌地图上画图 Whether you're planning a day out on the town, or want to orchestrate the perfect road tr ...
D3地图上如何标注坐标点
原文地址 http://blog.csdn.net/lzhlzz/article/details/46385299,部分引用,重点关注坐标点的投影转换方法. 1. 标注是什么标注,是指地图上只需要一 ...
大数据美食——寻找地图上的美味
上次分享了<教你30分钟创建汽车大屏>后,来咨询的人很多,其中地图可视化的问题最集中,这次我花了点时间,准备了一份美食相关的测试数据,向大家分享<寻找地图上的美味>是如何做成的 ...
我们讨论的是《战争之城》的一个简单版本。如果地图上只有空旷的空间，河流，钢墙和砖墙。你的任务是尽快得到奖金，假设没有敌人会打扰你(见下图) 你的坦克不能穿过河流和墙壁，但它可以通过射击摧毁砖墙。当你击
我们讨论的是<战争之城>的一个简单版本.如果地图上只有空旷的空间,河流,钢墙和砖墙.你的任务是尽快得到奖金,假设没有敌人会打扰你(见下图) 你的坦克不能穿过河流和墙壁,但它可以通过射击摧毁 ...
android高德marker添加点击,高德地图上添加marker，给每一个marker添加点击事件。...
高德地图上添加marker,给每一个marker添加点击事件. 高德地图上添加marker,给每一个marker添加点击事件.javascript var watch = [] $.ajax({ ty ...
Android百度地图 - 在地图上标注已知GPS纬度经度值的一个或一组覆盖物 - OPEN 开发经验库 - 360安全浏览器 8.1...
Android百度地图 - 在地图上标注已知GPS纬度经度值的一个或一组覆盖物 - OPEN 开发经验库 - 360安全浏览器 8.1 首页代码文档问答资讯经验 Gi ...
前端实现街道地图_HTML5实现地图上定位导航路线-前端H5/JS/CSS-敏捷大拇指-一个敢保留真话的IT精英社区...
本帖最后由 h5lover 于 2015-11-14 07:49 编辑 HTML5实现地图上定位导航路线 2.jpg (82.45 KB, 下载次数: 31) HTML5实现地图上定位导航路线 2 2 ...

在地图上,如何对一个地区进行矩形划分

在地图上,如何对一个地区进行矩形划分相关推荐

最新文章

热门文章