• 高德地图获取行政区域并且获取经纬度

    我们的需求是获取行政图的切片图，需要四个角的经纬度代码如下

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    8.     <title>拉框获取边界经纬度title>
    9.     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    10.     <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    11.     
    12.  
    13.     <script src="http://webapi.amap.com/maps?v=1.4.15&key=&plugin=AMap.MouseTool,AMap.DistrictSearch">script>
    14. head>
    15. <style>
    16.     html,
    17.     body,
    18.     #container {
    19.         margin: 0;
    20.         height: 100%;
    21.     }
    22.  
    23.     .input-item-text {
    24.         width: 7rem;
    25.     }
    26. style>
    27.  
    28. <body>
    29.     <div id="container">div>
    30.     <div class="input-card">
    31.         <label style='color:grey'>行政区边界查询label>
    32.         <div class="input-item">
    33.             <div class="input-item-prepend">
    34.                 <span class="input-item-text">行政级别span>
    35.             div>
    36.             <select id="level">
    37.                 <option value="district">districtoption>
    38.                 <option value="city">cityoption>
    39.                 <option value="province">provinceoption>
    40.             select>
    41.  
    42.         div>
    43.         <div class="input-item">
    44.             <div class="input-item-prepend">
    45.                 <span class="input-item-text">名称/adcodespan>
    46.             div>
    47.             <input id='district' type="text" value='泸溪县'>
    48.  
    49.         div>
    50.         <input id="draw1" type="button" class="btn" value="查询" />
    51.     div>
    52.     <script>
    53.         var map = new AMap.Map('container', {
    54.             center: [110.21682, 28.2205],//地图中心点
    55.             zoom: 10 //地图显示的缩放级别
    56.         });
    57.         var mouseTool = new AMap.MouseTool(map); //在地图中添加MouseTool插件
    58.         var drawRectangle = mouseTool.rectangle(); //用鼠标工具画矩形
    59.         AMap.event.addListener( mouseTool,'draw',function(e){ //添加事件
    60.             console.log(e.obj.getPath());//获取路径
    61.         });
    62.         var district = null;
    63.         var polygon;
    64.         function drawBounds() {
    65.             //加载行政区划插件
    66.             if (!district) {
    67.                 //实例化DistrictSearch
    68.                 var opts = {
    69.                     subdistrict: 0,   //获取边界不需要返回下级行政区
    70.                     extensions: 'all',  //返回行政区边界坐标组等具体信息
    71.                     level: 'district'  //查询行政级别为 市
    72.                 };
    73.                 district = new AMap.DistrictSearch(opts);
    74.             }
    75.             console.log(district)
    76.             //行政区查询
    77.             district.setLevel(document.getElementById('level').value)
    78.             district.search(document.getElementById('district').value, function (status, result) {
    79.                 console.log(status, result)
    80.                 if (polygon) {
    81.                     map.remove(polygon)//清除上次结果
    82.                     polygon = null;
    83.                 }
    84.                 var bounds = result.districtList[0].boundaries;
    85.                 if (bounds) {
    86.                     //生成行政区划polygon
    87.                     for (var i = 0; i < bounds.length; i += 1) {//构造MultiPolygon的path
    88.                         bounds[i] = [bounds[i]]
    89.                     }
    90.                    
    91.  
    92.                     polygon = new AMap.Polygon({
    93.                         strokeWeight: 1,
    94.                         path: bounds,
    95.                         fillOpacity: 0.4,
    96.                         fillColor: '#80d8ff',
    97.                         strokeColor: '#0091ea'
    98.                     });
    99.  
    100.                     map.add(polygon)
    101.                     map.setFitView(polygon);//视口自适应
    102.                 }
    103.             });
    104.         }
    105.         drawBounds();
    106.         document.getElementById('draw1').onclick = drawBounds;
    107.         document.getElementById('district').onkeydown = function (e) {
    108.             if (e.keyCode === 13) {
    109.                 drawBounds();
    110.                 return false;
    111.             }
    112.             return true;
    113.         };
    114.     
    115.     script>
    116. body>
    117.  
    118. html>

    效果如下

  • 相关阅读:
    【MySql系列】深入解析数据库索引
    docker基础总结
    在vscode中使用Latex：TexLive2023
    Python——缩进和选择
    【iOS】JSONModel的基本使用
    【分享】如何让压缩包里的文件“限制编辑”？
    聚观早报 | 脸书泄露数据被罚20亿；iPhone15将全系支持灵动岛
    C++：类和对象（三）
    java毕业设计鞍山丘比特房屋租赁管理系统Mybatis+系统+数据库+调试部署
    销售技巧之所遵循原则
  • 原文地址：https://blog.csdn.net/baidu_41899377/article/details/133794725