高德地图通过地图点击复制指定行政区域的经纬度数据_如何在高德地图中获取某个行政村区域数据坐标-CSDN博客

本文链接：https://blog.csdn.net/IDOshi201109/article/details/117560226

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

高德地图官方提供了获取鼠标点击经纬度的方法（高德地图官方文档）
获取鼠标点击经纬度
截图如下：
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 区域，可获得对应行政区域的准确经纬度数据。
上面代码可以直接复制使用。