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

news/2024/10/24 6:37:33/

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

高德地图官方提供了获取鼠标点击经纬度的方法(高德地图官方文档)
获取鼠标点击经纬度
截图如下:
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// adcodevar 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、打开官方链接 获取鼠标点击经纬度
2、复制上面的代码,然后粘贴上去,点击运行即可。


http://www.ppmy.cn/news/659567.html

相关文章

ionic3获取通过gps获取经纬度,并利用高德地图解析成地址

效果图&#xff1a;&#xff08;城市打卡这一行&#xff09; 1.安装插件&#xff1a; 一定要安装4.0版本&#xff08;亲测有效&#xff09;&#xff0c;其他版本的可能导致获取不到经纬度 卸载旧版本&#xff1a; ionic cordova plugin remove cordova-plugin-geolocation n…

用js引入高德地图

一、引入高德地图脚本 1.先登录高德开放平台 网址&#xff1a;高德开放平台 | 高德地图API 2.登陆进入页面之后点击控制台 3.找到创建新应用的按钮 4.创建应用&#xff0c;点击创建新应用 5.创建完成之后点击添加&#xff0c;如下图操作 6.点击应用管理--》我的应用查看申请…

android谷歌卫星地图,高德地图安卓端实现卫星地图路网功能

项目需求场景—— 绘制地块时需要显示卫星地图&#xff0c;还要显示路网信息 遇到的问题—— 目前高德地图只提供两种地图类型&#xff1a; AMap.MAP_TYPE_NORMAL 普通地图 AMap.MAP_TYPE_SATELLITE 卫星地图 前者提供了丰富的路网信息和建筑地标等信息&#xff0c;但是无法满足…

高德地图-根据经纬度获取地址(逆地理编码)

1.需要资源&#xff1a; 高德地图搜索SDK以及相关SDk下载地址 2.根据经纬度得到具体地址&#xff1a; 1.这里需要用到地图搜索SDK&#xff1b; 2.通过逆地理编码来实现。 3.示例代码&#xff1a; Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCrea…

通过高德地图获取 经纬度 以及地理位置等

配置 官方&#xff1a;链接: 参考官方配置. 首先给GPS权限检查 如上文链接: 权限检查. 配置完后 高德地图 获取定位 private fun gaode() {//初始化AMapLocationClientOption对象mLocationOption AMapLocationClientOption()//初始化定位mLocationClient AMapLocationClient…

高德地图逆地理编码Geocoder的getlocation获取不到位置信息

问题&#xff1a;原生定位接口定位失败&#xff0c;则status返回error事件或回调error信息,获取不到位置信息 产生原因&#xff1a;逆编码方法使用不了原因是使用的高德地图的应用方向web服务&#xff0c;而Geocoder属于web端 var geocoder new AMap.Geocoder({}) var addre…

高德地图经纬度拾取

地址&#xff1a; https://lbs.amap.com/tools/picker 作者&#xff1a;微微一笑绝绝子 出处&#xff1a;https://www.cnblogs.com/wwyxjjz/p/16291314.html 本博客文章均为作者原创&#xff0c;转载请注明作者和原文链接。

Android高德地图的使用,狠详细!手把手!(地图+定位+逆地理编码+输入提示+Poi搜索)

最近项目用到高德地图,因此来写一篇文章理一下高德的使用步骤方法,希望对大家有用! ##1.注册配置 废话不多说,要使用高德地图首先要去高德开放平台注册成为开发者(http://lbs.amap.com/), 注册成为高德开发者需要分三步&#xff1a;第一步&#xff0c;注册高德开发者&#xff1…