高德地图通过地图点击 复制指定行政区域的经纬度数据 客官°小女子只卖身不卖艺 2022-10-18 01:00 278阅读 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
还没有评论,来说两句吧...