百度地图获取行政区边界坐标

最新推荐文章于 2024-05-20 13:56:07 发布

焦虑的肉松面包

最新推荐文章于 2024-05-20 13:56:07 发布

阅读量2.9k

点赞数 2

分类专栏： Log 文章标签：百度地图

本文链接：https://blog.csdn.net/weixin_44131142/article/details/103696494

版权

Log 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

输入行政区名称,获取相应的行政区边界坐标

<!DOCTYPE html>
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
          <style type="text/css">
              body,
              html,
              #allmap {
                   width: 100%;
                   height: 100%;
                   overflow: hidden;
                   margin: 0;
                   font-family: "微软雅黑";
              }
          </style>
          <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xx"></script>
          <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
          <title>添加行政区划</title>
     </head>
     <body>
          <div id="getCity" style="margin: 1% 40%;">
              <input type="text" placeholder="请输入行政区名字" />
              <button id="city">获取行政区边界坐标</button>
          </div>
          <div id="allmap"></div>
     </body>
</html>
<script type="text/javascript">
     // 百度地图API功能
     var map = new BMap.Map("allmap");
     map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
     map.enableScrollWheelZoom();
     $('#city').click(function() {
          var city = $(':input').val();
          var bdary = new BMap.Boundary();
          bdary.get(city, function(rs) { //获取行政区域
              map.clearOverlays(); //清除地图覆盖物      
              var count = rs.boundaries.length; //行政区域的点有多少个
              if(count === 0) {
                   alert('未能获取当前输入行政区域');
                   return;
              }
              var pointArray = [];
              for(var i = 0; i < count; i++) {
                   var ply = new BMap.Polygon(rs.boundaries[i], {
                        strokeWeight: 2,
                        strokeColor: "#ff0000"
                   }); //建立多边形覆盖物
                   var str = JSON.stringify(ply.ia); //将BMap获取的行政区边界经纬度转为字符串
                   spiltStr(str);
                   map.addOverlay(ply); //添加覆盖物
                   pointArray = pointArray.concat(ply.getPath());
              }
              map.setViewport(pointArray); //调整视野 
          });
     });
     //字符串封装为json
     function spiltStr(city) {
          //console.log(city+'---')
          var str = "121.34277300108,31.300726938605;121.34023490295,31.30656768649;121.34101430412,31.321852305581;121.34532986852,31.32373744307;121.34507562469,31.326325179418;121.34279680099,31.327430729214;121.33368722478,31.352486594706;121.32863323993,31.355946076452;121.3306342856,31.389518049891;121.32683032531,31.41448550211;121.33644426228,31.420048486776;121.33796679321,31.419826266008;121.33974283911,31.427986737928;121.33898864558,31.440913595385;121.33444416932,31.453434852669;121.32712127167,31.459698918395;121.32359337774,31.475180614573;121.31526712011,31.489321129362;121.31449534014,31.502646507446;121.29513460234,31.511763775428;121.28658896966,31.509453948404;121.27854782016,31.503306859672;121.25459705023,31.498569551283;121.21061795124,31.479894989687;121.20080623465,31.473441396056;121.19227370437,31.461329066124;121.18074389625,31.455132109974;121.17248676891,31.457784975575;121.15417124487,31.449591888376;121.15190698691,31.44485092269;121.16995564339,31.438369269356;121.15641170403,31.42808158186;121.16368200305,31.418036455773;121.15615209913,31.408916433233;121.15389894579,31.396855643986;121.14636752368,31.389519869487;121.1216241984,31.381207905131;121.126436312,31.375522857236;121.11327467502,31.372544843095;121.11504878311,31.358515688821;121.12543166,31.355738088985;121.12517943556,31.350576427542;121.13706169265,31.348468587078;121.13626008815,31.30993641992;121.14684967884,31.308793560918;121.15113791549,31.315474234933;121.16066357022,31.29917558545;121.16692386311,31.291073907869;121.16166696203,31.285625519425;121.16718195826,31.276446521814;121.17544355574,31.279163976083;121.18898716896,31.263877724792;121.20505391684,31.260119976477;121.21562156159,31.267376880475;121.27097267115,31.262577404004;121.27425078362,31.26044885246;121.29337239048,31.249760859417;121.29940623897,31.238478630296;121.32079145614,31.233202075819;121.34077824014,31.238325554883;121.34559319768,31.244083837124;121.3549768665,31.248019413486;121.36690797737,31.246319504389;121.37222869771,31.253136099939;121.3863911862,31.256071762754;121.3808205898,31.26662893588;121.36689179338,31.268484647818;121.36561439598,31.274102752167;121.35038733712,31.278662550346;121.34277300108,31.300726938605";
          var points = [];
          $.each(str.split(";"), function(index, value) {
              var point = {};
              point.lng = value.split(',')[0];
              point.lat = value.split(',')[1];
              points.push(point);
          });
          var data = JSON.stringify(points);
          if(city == data) {
              console.log('true');
          }
          //console.log(data);
     }
</script>

焦虑的肉松面包

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图获取行政区边界坐标

输入行政区名称,获取相应的行政区边界坐标<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" co...
复制链接

扫一扫