效果:
脚本:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>耕地分布图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script src="Js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Js/GeoUtils.js" type="text/javascript"></script>
<style type="text/css">
html,body
{
height:100%;
margin:0;
}
</style>
</head>
<body>
<div style="width:100%; height:100%;z-index:9;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container", { mapType: BMAP_HYBRID_MAP }); //设置卫星图为底图
map.centerAndZoom(new BMap.Point(112.244629, 32.094896), 15); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.NavigationControl()); //添加鱼骨控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("襄阳"); // 设置3D地图显示的城市 此项是必须设置的
fun(1, "112.254474,32.088357", "new BMap.Point(112.25221,32.091263),new BMap.Point(112.252785,32.091202),new BMap.Point(112.252929,32.090621),new BMap.Point(112.253576,32.090407),new BMap.Point(112.253576,32.090896),new BMap.Point(112.256199,32.090468),new BMap.Point(112.256558,32.091416),new BMap.Point(112.258319,32.091355),new BMap.Point(112.256055,32.085114),new BMap.Point(112.254007,32.085451),new BMap.Point(112.252785,32.085512),new BMap.Point(112.252282,32.085145),new BMap.Point(112.251851,32.085145),new BMap.Point(112.251635,32.084625),new BMap.Point(112.251025,32.084533),new BMap.Point(112.252138,32.091018)", '已播', 'green');
fun(2, "112.244543,32.085696", "new BMap.Point(112.24086,32.087332),new BMap.Point(112.244561,32.087669),new BMap.Point(112.248065,32.087791),new BMap.Point(112.248658,32.087883),new BMap.Point(112.249125,32.086047),new BMap.Point(112.24952,32.086063),new BMap.Point(112.250023,32.084258),new BMap.Point(112.241435,32.082973),new BMap.Point(112.240609,32.084548)", '未播', 'blue');
fun(3, "112.248244,32.088342", "new BMap.Point(112.247737,32.087975),new BMap.Point(112.248442,32.089149),new BMap.Point(112.248536,32.089149),new BMap.Point(112.248572,32.088036)", '未播', 'green');
//变量名,标签坐标,多边形坐标,文本,边框颜色
function fun(i,xy,arr,wb,ys) {
//创建经纬度数组
eval("var secRingCenter" + i+" = new BMap.Point("+xy+")");
eval("var secRing"+i+" = ["+arr+"]");
//创建多边形
eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { strokeColor: \"" + ys + "\", strokeWeight: 4})");
//eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { FillColor:\"red\", strokeColor: \"blue\", strokeWeight: 2, strokeOpacity: 0.3 })");
//添加多边形到地图上
map.addOverlay(eval("secRingPolygon"+i));
var resultArea = BMapLib.GeoUtils.getPolygonArea(eval("secRingPolygon" + i)); //计算多边形的面积(单位米)
//给多边形添加鼠标事件
eval("secRingPolygon"+i).addEventListener("mouseover", function () {//鼠标经过时
eval("secRingPolygon" + i).setStrokeColor("red"); //多边形边框为红色
//eval("secRingPolygon" + i).setFillColor(ys);
map.addOverlay(eval("secRingLabel"+i)); //添加多边形遮照
//map.panTo(eval("secRingCenter"+i)); //将地图移动到指定点
});
eval("secRingPolygon"+i).addEventListener("mouseout", function () {
eval("secRingPoly