高德地图通过地图点击复制指定行政区域的经纬度数据

客官°小女子只卖身不卖艺 2022-10-18 01:00 327阅读 0赞

# 高德地图通过地图点击 复制指定行政区域的经纬度数据 #

高德地图官方提供了**获取鼠标点击经纬度**的方法（高德地图官方文档）  
[获取鼠标点击经纬度][Link 1]  
截图如下：  
![111][]

鼠标点击地图区域可以获得对应的经纬度数据，但是目标太大，不是想要的需求。  
对应代码如下，支持编辑。

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>鼠标拾取地图坐标</title>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    </head>
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        .map{
            height: 100%;
            width: 100%;
            float: left;
        }
    </style>
    <body>
    <div id="container" class="map"></div>
    <div class="input-card">
        <h4>左击获取经纬度：</h4>
        <div class="input-item">
          <input type="text" readonly="true" id="lnglat">
        </div>
    </div>
    
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript">
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
    </script>
    </body>
    </html>

想要的是，在某个行政区域范围内点击的数据。因为支持编辑，so,改造了下  
先贴代码如下：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
        <style>
            html,
            body,
            #container {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <title>简易行政区图 - 省份&层级</title>
    </head>
    <body>
    <div id="container">
      
      </div>
      
    <div class="input-card">
        <h4>选择省份</h4>
        <select name="code-list" id="adcode-list" style="height: 28px;margin-right: 10px;" onchange="changeAdcode(this.value)">
            <option value="-1">选择省份</option>
        </select>
        <h4>选择层级</h4>
        <select name="code-list" style="height: 28px;margin-right: 10px;" onchange="changeDepth(this.value)">
            <option value="0">0 - 显示省级</option>
            <option value="1">1 - 显示市级</option>
            <option selected value="2">2 - 显示区/县级</option>
        </select>
      <div class="input-card">
        
    </div>
      
      <h4>左击获取经纬度：</h4>
        <div class="input-item">
          <input type="text" readonly="true" id="lnglat">
        </div>
      
    </div>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
    <script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script>
    <script>
        var adCode = 130000;
        var depth = 2;
        var map = new AMap.Map("container", {
            zoom: 4.5,
            center: [116.412427, 39.303573],
            pitch: 0,
            viewMode: '3D',
        });
    	
      //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
    
        // 创建省份图层
        var disProvince;
        function initPro(code, dep) {
            dep = typeof dep == 'undefined' ? 2 : dep;
            adCode = code;
            depth = dep;
    
            disProvince && disProvince.setMap(null);
    
            disProvince = new AMap.DistrictLayer.Province({
                zIndex: 12,
                adcode: [code],
                depth: dep,
                styles: {
                    'fill': function (properties) {
                        // properties为可用于做样式映射的字段，包含
                        // NAME_CHN:中文名称
                        // adcode_pro
                        // adcode_cit
                        // adcode
                        var adcode = properties.adcode;
                        return getColorByAdcode(adcode);
                    },
                    'province-stroke': 'cornflowerblue',
                    'city-stroke': 'white', // 中国地级市边界
                    'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
                }
            });
    
            disProvince.setMap(map);
        }
    
        // 颜色辅助方法
        var colors = {};
        var getColorByAdcode = function (adcode) {
            if (!colors[adcode]) {
                var gb = Math.random() * 155 + 50;
                colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
            }
    
            return colors[adcode];
        };
    
        // 按钮事件
        function changeAdcode(code) {
            if (code != 100000) {
                initPro(code, depth);
            }
        }
    
        function changeDepth(dep) {
            initPro(adCode, dep);
        }
    
        initPro(adCode, depth);
    
    </script>
    <script>
      document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2019)6379号、GS(2019)756号'
        // 构造下拉框
        var optArr = adcodes.map(function (item) {
            if (item.adcode == 100000) {
                item.name = '选择省份';
            }
    
            return '<option ' + (item.adcode == adCode ? 'selected' : '') + ' value="' + item.adcode + '">' + item.name + '</option>';
        });
    
        document.getElementById('adcode-list').innerHTML = optArr.join('');
    </script>
    </body>
    </html>

效果如下：  
![222][]  
我这边 也是将官方的事例整合了下，  
在截图1中，编辑了对应代码，加上了截图序号2 的功能块。  
通过2的选择操作，找到对应 的行政区域如：3所示。  
对过点击 3 区域，可获得对应 行政区域的准确经纬度数据。  
上面代码可以直接复制使用。

## 步骤： ##

1、打开官方链接 [获取鼠标点击经纬度][Link 1]  
2、复制上面的代码，然后粘贴上去，点击运行即可。

[Link 1]: https://lbs.amap.com/demo/javascript-api/example/map/click-to-get-lnglat
[111]: /images/20221014/92aeb3d0951e4dc1a1c7b512fe9f35f3.png
[222]: /images/20221014/31a58ab5af3346b9956194f5adb2f937.png