获得行政区域的经纬度与经纬度连线

最新推荐文章于 2023-10-12 17:00:04 发布

春水_

最新推荐文章于 2023-10-12 17:00:04 发布

阅读量1.4k

点赞数

文章标签：地图坐标

本文链接：https://blog.csdn.net/yue369/article/details/42119731

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="副本 SHMap.aspx.cs" Inherits="page_map_SHMap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>
<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=2.1"></script>
</head>
<body>
<div style="width:1520px;height:840px;border:1px solid gray;float:left; display:inline; " id="container"></div><div id="info" style="float:left; display:inline; border:1px solid #ccc;"></div>
<p><input id="startBtn" type="button" οnclick="startTool();" value="开启取点工具" /><input type="button" οnclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>

    <input type="text" id="txtName" value="虹口区" />
</body>
</html>
<script type="text/javascript">
var mapName1="崇明县";
var map = new BMap.Map("container");                        // 创建Map实例
map.centerAndZoom(mapName1, 12);     // 初始化地图,设置中心点坐标和地图级别

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

function getBoundary(){   
    var bdary = new BMap.Boundary();
    var name = mapName1;//document.getElementById("districtName").value;
    bdary.get(name, function(rs){       //获取行政区域
        map.clearOverlays();        //清除地图覆盖物       
        var count = rs.boundaries.length; //行政区域的点有多少个 
        for(var i = 0; i < count; i++){
            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
            var bs=rs.boundaries[i].split(";");
            var str="";
            for(var j=0;j<bs.length;j++)
            {
                str+="["+bs[j]+"],"
            }
            alert(str);
            map.addOverlay(ply);  //添加覆盖物
            map.setViewport(ply.getPath());    //调整视野         
        }                
    });   
}
function startTool(){   //开关函数
mapName1=document.getElementById("txtName").value;
getBoundary();
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);}
        points.push(newpoint);  //将新增的点放到数组中
        polyline.setPath(points);   //设置折线的点数组
        map.addOverlay(polyline);   //将折线添加到地图上
        document.getElementById("info").innerHTML += "[" + e.point.lng + "," + e.point.lat + "],";    //输出数组里的经纬度
    }
});
map.addEventListener("dblclick",function(e){   //双击地图，形成多边形覆盖物
if(key==0){
        map.disableDoubleClickZoom();   //关闭双击放大
var polygon = new BMap.Polygon(points);
        map.addOverlay(polygon);   //将折线添加到地图上
    }
});
</script>

通过输入框中的区域可alert出该区域的经纬度，

通过鼠标点击可获得各个点击点的经纬度，并在页面中将各个点连成线