百度地图自定义选取区域(二)





选取区域之后,jsAPI提供了一个GeoUtils类来进行判断。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>行政区域工具</title>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.2&amp;ak=&amp;services=&amp;t=20130716024057"></script>
<link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/12/bmap.css">
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
</head>
<body>
<div style="width:820px;height:640px;border:1px solid gray" id="container"></div>
<p><input id="startBtn" type="button" onclick="startTool();" value="开始选取区域" />
<input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>


<input type="text" id="jingweidu" value="" />

<input type="button" onclick="ptInPolygon();" value="判断经纬度是否在区域内" /></p>

<div id="info"></div>


</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");// 创建Map实例
map.centerAndZoom("深圳", 13);     // 初始化地图,设置中心点坐标和地图级别

map.enableScrollWheelZoom();

var key = 1;    //开关
var newpoint;   //一个经纬度点
var points = [];    //数组,放经纬度信息
var polyline = new BMap.Polyline(); //折线覆盖物
var polygon;

function startTool(){   //开关函数
if(key==1){
        document.getElementById("startBtn").style.background = "green";
        document.getElementById("startBtn").style.color = "white";
        document.getElementById("startBtn").value = "开启状态";
        key=0;
    }
    else{
        document.getElementById("startBtn").style.background = "red";
        document.getElementById("startBtn").value = "关闭状态";
        key=1;
    }
}
map.addEventListener("click",function(e){   //单击地图,形成折线覆盖物
    newpoint = new BMap.Point(e.point.lng,e.point.lat);
    if(key==0){
    //    if(points[points.length].lng==points[points.length-1].lng){alert(111);}
		var markerhead = new BMap.Marker(newpoint);        // 创建标注  
		map.addOverlay(markerhead);                     // 将标注添加到地图中

        points.push(newpoint);  //将新增的点放到数组中
        polyline.setPath(points);   //设置折线的点数组
        map.addOverlay(polyline);   //将折线添加到地图上
        document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>";    //输出数组里的经纬度
    }
});
map.addEventListener("dblclick",function(e){   //双击地图,形成多边形覆盖物
if(key==0){
        map.disableDoubleClickZoom();   //关闭双击放大
polygon = new BMap.Polygon(points);
        map.addOverlay(polygon);   //将折线添加到地图上
    }
});


//点在多边形内(示例)
function ptInPolygon(){

    //var ply = new BMap.Polygon(points);

	var jingweidu = document.getElementById('jingweidu').value;
	var jins = jingweidu.split(",");

    var pt =new BMap.Point(jins[0],jins[1]);
    
    var result = BMapLib.GeoUtils.isPointInPolygon(pt, polygon);
    if(result == true){
        alert("点在多边形内");
    }else{
        alert("点在多边形外")
    }
    
    //演示:将面添加到地图上    
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(polygon);
}

</script>

暂时解决了判断是否在区域内的问题了,但是我做的功能需要在后台判断是否在区域内,不知道百度地图API有没有WEB服务API的这个接口











你可能感兴趣的:(百度地图自定义选取区域(二))