这一篇将比前面两篇博客更加的完整,也更容易扩展,为后面实现整个功能提供了思路。
<!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&ak=&services=&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>
<input type="button" onclick="submitFun();" 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; // 行车折线的数据
var closeMark = 0;// 闭合标记
var dataPool = "";
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){ //单击地图,形成折线覆盖物
// 判断是否已经闭合选择的区域
if(closeMark == 1){
alert("已经闭合选择区域,请清除后重新选择!");
return false;
}
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); //将折线添加到地图上
dataPool+=e.point.lng + "," + e.point.lat + "|";
document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>"; //输出数组里的经纬度
}
});
// 闭合选择区域
map.addEventListener("dblclick",function(e){ //双击地图,形成多边形覆盖物
// alert("形成多边形覆盖物");
if(key==0){
closeMark = 1;// 设置为已闭合
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);
}
// 提交
function submitFun(){
if(key == 1){
alert("您还没有选择区域!");
return false;
}
if(closeMark == 1){
stringJudge(dataPool);
}else{
alert("您选择的区域没有闭合,请双击闭合!");
}
}
// 使用传递进来的字符串来判断是否在区域内
function stringJudge(dp){
var points=[];
var dps = dp.split("|");
for(var i=0;i<dps.length-1;i++){
var dpArr = dps[i].split(",");
var newpoint = new BMap.Point(dpArr[0],dpArr[1]);
points.push(newpoint);
}
//alert(points);
var ply = new BMap.Polygon(points);
//alert(ply);
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, ply);
if(result == true){
alert("点在多边形内-------");
}else{
alert("点在多边形外------")
}
var mkr = new BMap.Marker(pt);
map.addOverlay(mkr);
}
</script>