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

来源:互联网 发布:2018全球人工智能大会 编辑:程序博客网 时间:2024/05/01 05:59

<%@ 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" onclick="startTool();" value="开启取点工具" /><input type="button" onclick="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出该区域的经纬度,

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

0 0
原创粉丝点击