选择省市区后在地图上圈出区域，并可在区域内进行拖拽改变经纬度

最新推荐文章于 2024-05-11 17:33:45 发布
最新推荐文章于 2024-05-11 17:33:45 发布
阅读量2.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdm13209211861/article/details/108004171
版权

一、申请key

参考高德地图API（https://lbs.amap.com/api/javascript-api/guide/abc/prepare）

1、首先需要注册开发者账号，成为高德开放平台开发者；
2、 登陆之后，在进入「应用管理」 页面「创建新应用」；
3、 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

二、开发准备

1、在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2、添加div标签作为地图容器，同时为该div指定id属性；

<div id="container"></div>

3、为地图容器指定高度、宽度；

#container {width:300px; height: 180px; }

4、进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

三、业务代码

需求：实现选择省市区后，在地图上根据区级圈出指定区域，并可在区域内选择任意位置，拿到经纬度和详细地址。
参考高德地图API（https://lbs.amap.com/api/javascript-api/guide/services/district-search）
用的是vue框架，写了一个测试html，直接附代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取经纬度</title>
</head>
<body>
  <div id="app">
    <div id="container" style="width:1000px; height:800px"></div>
  </div>
</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript"
  src="https://webapi.amap.com/maps?v=1.4.1&&key=040a7c6537e9acae3221a78dbfd23557&plugin=AMap.MarkerClusterer,AMap.Geocoder,AMap.DistrictSearch,AMap.Polygon,AMap.CitySearch,AMap.Geolocation,AMap.Autocomplete,AMap.ToolBar,AMap.PlaceSearch"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      dataForm: {}
    },
    mounted() {
      this.requireLoaction()
      this.marker()
    },
    methods: {
      requireLoaction() {
        let map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 10,
          center: ""
        });
        map.setZoom(15);
        map.plugin(['AMap.Scale'], function () {
          var scale = new AMap.Scale({});
          map.addControl(scale);
        });
        map.plugin('AMap.Geolocation', function () {
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,// 是否使用高精度定位，默认：true
            convert: true,
            showMarker: true,
            panToLocation: true,
            timeout: 10000
          });
          geolocation.getCurrentPosition();
          map.addControl(geolocation);
          AMap.event.addListener(geolocation, 'complete', onComplete)
          AMap.event.addListener(geolocation, 'error', onError)

          function onComplete(data) {
            // data是具体的定位信息
            // window.alert(data.formattedAddress);
            console.log(data.addressComponent)
          }

          function onError(data) {
            // 定位出错
            window.alert("定位出错！");
            console.log(data)
          }
        })
      },
      marker() {
        let _self = this;
        var map,
          marker,
          lnglat,
          adcode,
          address,
          districtaddres,
          districtvalue,
          level;
        // 地理编码转换
        var geocoder = new AMap.Geocoder({
          city: '全国', // 城市默认：“全国”
          radius: 1000 // 范围，默认：500
        });
        let addressAll = '陕西省宝鸡市凤翔县'  //将选中的省市区地址赋给addressAll
        geocoder.getLocation(addressAll, function (status, result) {
          if (status === "complete" && result.geocodes.length) {
            adcode = result.geocodes[0].adcode;
            lnglat = result.geocodes[0].location;
            level = result.geocodes[0].addressComponent.level;
            districtvalue = result.geocodes[0].addressComponent.district;
            map = new AMap.Map("container", {
              resizeEnable: true,
              center: lnglat,
              zoom: 13
            });
            // 加载行政区划插件
            var district = null;
            var polygons = [];
            if (!district) {
              // 实例化DistrictSearch
              var opts = {
                subdistrict: 0, // 获取边界不需要返回下级行政区
                extensions: "all", // 返回行政区边界坐标组等具体信息
                level: level // 查询行政级别为 市
              };
              district = new AMap.DistrictSearch(opts);
            }
            // 行政区划线
            if (adcode == '370282') {
              adcode = '370215'  //这里的重新赋值是因为青岛市即墨区的区域编码修改
            }
            district.search(adcode, function (status, result) {
              //这里是根据区域编码来圈区域的，还可以根据行政区名称（将adcode换成'凤翔县'）、citycode
              map.remove(polygons); // 清除上次结果
              polygons = [];
              var bounds = [];
              bounds = result.districtList[0].boundaries;
              if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                  // 生成行政区划polygon
                  var polygon = new AMap.Polygon({
                    strokeWeight: 1,
                    path: bounds[i],
                    fillOpacity: 0.4,
                    fillColor: "#80d8ff",
                    strokeColor: "#0091ea"
                  });
                  polygons.push(polygon);
                }
              }
              map.add(polygons);
              map.setFitView(polygons); // 视口自适应
            });
            // 标记中心点
            if (!marker) {
              marker = new AMap.Marker({
                position: map.getCenter(),
                icon:
                  "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                offset: new AMap.Pixel(-13, -30),
                // 设置是否可以拖拽
                draggable: true,
                cursor: "move",
                // 设置拖拽效果
                raiseOnDrag: true
              });
              marker.setPosition(map.getCenter());
              map.setFitView(marker);
              map.add(marker);
              geocoder.getAddress(map.getCenter(), function (status, result) {
                if (status === "complete" && result.regeocode) {
                  address = result.regeocode;
                  console.log(address.addressComponent.adcode, adcode)
                  if (address.addressComponent.adcode === adcode) {
                    _self.dataForm.merAddressLongitude = lnglat.lng;
                    _self.dataForm.merAddressLatitude = lnglat.lat;
                    // 地址赋值只给详细地址
                    _self.dataForm.merAddress =
                      address.addressComponent.township +
                      address.addressComponent.street +
                      address.addressComponent.streetNumber;
                    // _self.dataForm.sp_address = address.formattedAddress;
                  } else {
                    //alert("超出所在区域请重新选择")
                    // 当超出区域回到原点
                    marker.setPosition(map.getCenter());
                  }
                } else {
                  alert(JSON.stringify(result));
                }
              });
              marker.on("dragend", function (e) {
                console.log(e)
                let lngstring = marker.getPosition(map).lng;
                let latstring = marker.getPosition(map).lat;
                let lnglatsmall = lngstring + "," + latstring;
                console.log(lngstring, latstring)
                geocoder.getAddress(lnglatsmall, function (status, result) {
                  if (status === "complete" && result.regeocode) {
                    address = result.regeocode;
                    console.log(address.addressComponent.adcode, adcode)
                    if (address.addressComponent.adcode === adcode) {
                      _self.dataForm.merAddressLongitude = lngstring;
                      _self.dataForm.merAddressLatitude = latstring;
                      _self.dataForm.merAddress =
                        address.addressComponent.township +
                        address.addressComponent.street +
                        address.addressComponent.streetNumber;
                    } else {
                      //alert("超出所在区域请重新选择");
                      // 当超出区域回到原点
                      marker.setPosition(map.getCenter());
                    }
                  } else {
                    alert(JSON.stringify(result));
                  }
                });
              });
            } else {
              alert(JSON.stringify(result));
            }
          }
        });
      }
    }
  });
</script>

四、效果图

气球可以在区域内进行拖拽来改变详细地址和经纬度
在这里插入图片描述

我爱画页面
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中高德地图限制拖拽地图的范围
weixin_44221944的博客
05-17 1478
1、首先要在地图加载完成切中心点已确定的地方获取当前地图边界范围坐标 (我的map用的是全局map) this.logMapBounds() logMapBounds() { var bounds = this.map.getBounds(); // 横纬竖经 this.northa=bounds.northeast.toString() this.southa=bounds.southwest.toString() // console.log(bounds,
高德地图开放平台——行政区划分DistrictSearch 准确定位区域，指定某一城市的行政区
Caiqiudan的博客
03-06 8400
当搜索宝山区时，会定位到赤峰市的元宝山区👇，然而想要的是上海市宝山区。 解决办法，利用AMap.PlaceSearch获得行政区号adcode，用adcode来搜索对应的区域。 这里利用了AMap.PlaceSearch支持模糊搜索的功能。且AMap.DistrictSearch支持区号搜索 效果图👇，支持模糊搜索： 上代码 head部分 <!-- 行政区边界查询 --> <div class="input-card" style="right:31rem; width:10
百度地图圈出一个范围
07-01
以一个经纬度为圆心，传入一个半径，画出一个圆
uniapp App端地图定位选择，使用高德地图api根据经纬度获取省市区信息
最新发布
qq_39534956的博客
05-11 1339
output=JSON&location=经度,纬度&key=高德地图key。3.在manifest.json --> App模块配置中, 勾选maps地图选项，选用百度地图或者高德地图均可，填写相应平台申请的key值。1.使用uni.chooseLocation()获取到经纬度数据；
基于高德地图，标多个点，画多个区域
西夏伏地魔
09-22 1994
1. 渲染地图 var map = new AMap.Map("container", { resizeEnable: true, center: [109.780925,19.163534], //海南省 mapStyle:"amap://styles/whitesmoke", zoom: 9, //地图显示的缩放级别 zooms:[3,22] }); 2. 在地图上获取现有的网格区域 //街镇区域的颜色 .
在地图上,如何对一个地区进行矩形划分
热门推荐
小崔的博客
11-23 1万+
首先先看下效果图 主要是先根据百度百科确定北京区域所在的经纬度，然后计算大概。并且在地图上画矩形的经纬度顺序是左,左上，右上,右，按照顺时针方向进行设置。如果顺序反了可能画出的就不是矩形了本文是调用第三方高德的地图API。下面给出源码： 1.html --> html { height:10
百度地图打标记并圈出范围（米）
05-11
在百度地图上打标记，可长按标记处按下的地方，并用半透明圆圈标出周围自定义多少米范围，同样适用于google map，几乎不用改代码
高德地图2021年10月省市区县街道拼音经纬度城市行政区域MYSQL数据
10-26
于是自己花时间重新基于高德地图API接口采集了一份最新的城市区域数据。总计6万多条数据。数据格式如下： INSERT INTO `districts` (`id`, `name`, `pinyin`, `initials`, `letter`, `citycode`, `adcode`, `parent...
省市区编码与经纬度映射表
06-10
adcode name 经度 维度 110000 北京市 116.405285 39.904989 120000 天津市 117.190182 39.125596 130000 河北省 114.502461 38.045474 140000 山西省 112.549248 37.857014 .....
vue实现手机端省市区区域选择
10-16
主要为大家详细介绍了vue实现手机端省市区区域选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
高德地图 省市区 三级联动 经纬度 区号
02-29
高德地图省市区三级联动，带经纬度区号可执行sql数据，可直接导入数据库使用。 国省市区（县）点位经纬度数据，包含区域代码、层级关系，可做三级联通功能。
高德地图Marker拖动圆环范围.7z
07-12
高德地图Marker拖动圆环范围.7z
全国省市区经纬度js文件
07-25
全国省市区经纬度js文件
基于百度地图开发——在地图上框出市、区的边界线
weixin_30364325的博客
12-25 858
摘要：其实这个事例已经有很多大神写了，但是都不是我想要的，我就补充一点我的东西。 话不多说直接上代码： 一、建立地图 创建地图对象；设立中心点以及地图级别。 var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 12); 二、添加地...
javascript:在网页地图上画圆形范围圈、位置图标标点
qq_44077052的博客
10-25 6555
我使用的是高德地图，因为是在网页上使用，所以我选择的是web端。 这是web端地图中的教程和实例 涉及到的实例很多，这里我就为大家演示一下圆形范围覆盖和地图标点 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
中国省市县联动地图，可更换成任意省，地图点击省市县下钻。可显示数据并根据数据大小标注不同颜色
07-27 1813
两类地图预览效果如下： 为了保证读者们都能理解透彻 我们先做中国地图省市县三级联动，再根据代码改成某个省的市县联动！ 可用于大屏展示地图 地图可以是平面的也可以是3d的， 3d地图请参考我的另一篇文章：实用且牛逼的3D旋转地图上显示柱图，可以更换成任意省市 1. 需要素材 asset存放地图各省市县的json css是简单的布局排版 js：index3是湖南省的代码；index-china为全国代码；其余js为插件不用管 我们需要关注的就是这两个js页面； 2.HTML代码与css代码（复制可用） &
百度地图 baidu-map 地图根据范围画圈
weixin_44008500的博客
06-30 9042
地图画圈
GIS地图圆选查询
weixin_44545712的博客
05-28 380
GIS地图圆选查询 ----------------------------------------------------------------------------------- 开发工具与关键技术:VS GIS 作者：纳兹 撰写日期：2020.05.28 ----------------------------------------------------------------------------------- 这里以某区慢...
GIS地图位置选定
qq_44538193的博客
04-27 710
文献种类：专题技术总结文献； 开发工具与关键技术：Visual Studio 2019 作者：李德新 ；年级：1804 ；撰写时间：2020年4月27日 GIS地图位置选定 开发工具与关键技术：Visual Studio 2019 作者：李德新 撰写时间：2020年4月27日 在我们的开始GIS 的课程学习的过程中，我们学会了使用SuperMapr软件，而我们使用SuperMap软件创建地...
在uniapp中选择区域省市区，具体怎么实现
06-06
在uniapp中选择区域省市区，可以使用uni-app官方提供的picker组件来实现。以下是具体的步骤： 1. 在页面中引入picker组件，示例如下： ```html <template> <view> <picker mode="region" @change="regionChange"></picker> </view> </template> ``` 2. 在页面的methods中定义regionChange方法，用于获取用户选择的省市区信息，如下： ```js methods: { regionChange(e) { console.log('picker发送选择改变，携带值为', e.detail.value) } } ``` 3. 最后，在页面的script中添加导航栏标题，示例如下： ```js export default { navigationBarTitleText: '选择区域' } ``` 这样就可以在uniapp中实现选择区域省市区了。需要注意的是，使用picker组件时，需要在页面的onLoad生命周期中先获取省市区数据，再将数据赋值给picker组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值