js调用高德地图API接口——返回坐标和省市区地理位置信息

项目场景：

项目需求：

​ 需要使用jQuery调用高德地图API接口,实现鼠标点击地图后，返回地址的详细信息（如省，市，县/区，街道等等）、坐标

项目环境：

​ html 、vue 、js 、springCloud

​ 该案例中调用的方法采用js写，方便读者使用

---

使用步骤：

1. 首先需要再高德官方地图高德官方地图中注册账号，获取key和安全密钥高德地图官网API
   应用管理–>我的应用–>创建应用，名称自定义，点击保存后会得到如下界面中的key和密钥
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a1DGaARx-1657800181253)
   

   ​

2. 获取到key和密钥之后就可以使用了，html中使用方式如下

   注意后面的 ‘&plugin=AMap.Geocoder’ 插件的使用方式有两种，这是其中的一种，具体可以查看高德地图官方文档

   <script type="text/javascript">
           // 高德地图秘钥，必须在加载JSAPI load.js文件之前
           window._AMapSecurityConfig = {
               securityJsCode: '放入你上面的申请的密钥'
           }
   </script>
   <!--&callback=init-->
   <script src="https://webapi.amap.com/maps?v=2.0&key=放入上面申请的key&plugin=AMap.Geocoder"></script>
   

3. 下面是核心代码

   <script type="text/javascript">
       window.init = function(){
           //声明地图
           var map = new AMap.Map('container', {
              center:[117.000923,36.675807],
              zoom:11,
               resizeEnable: true
           });
           //声明点标记
           var marker = new AMap.Marker();
   
           //声明Geocoder，使用getAddress()方法来获取坐标点对应的地址
           var geocoder = new AMap.Geocoder({
               city: '北京',
               radius: 1000
           })
   
           // 使用geocoder做地理/逆地理编码
           function regeoCode() {
               var lnglat  = document.getElementById('hiddenMap').value.split(',');
               map.add(marker);
               marker.setPosition(lnglat);
               geocoder.getAddress(lnglat, function(status, result) {
                   if (status === 'complete'&&result.regeocode) {
                       /*console.log(result.regeocode.addressComponent.province);
                       console.log(result.regeocode.addressComponent.city);
                       console.log(result.regeocode.addressComponent.district);*/
                       document.getElementById('hiddenProvince').value = result.regeocode.addressComponent.province;
                       document.getElementById('hiddenArea').value = result.regeocode.addressComponent.city;
                       document.getElementById('hiddenCounty').value = result.regeocode.addressComponent.district;
                       document.getElementById('address').value = result.regeocode.formattedAddress;
                   }else{
                       log.error('根据经纬度查询地址失败')
                   }
               });
           }
           // 声明点击事件的回调函数
           function onClick(e){
               //console.log(e);
               document.getElementById('hiddenMap').value = e.lnglat;
               regeoCode();
           }
           // 给地图实例绑定点击事件 onClick
           map.on('click', onClick);
       }
   </script>
   

   ​

   注意！！！其中最主要的是id为container的容器，该容器用来存放地图对象，其外面的div是方便用于调整显示格式，当在使用时你可以根据实际情况进行选择；是在原有的基础上加了4个隐藏域，存放相应详细信息

   <div class="layui-form-item address">
       <label class="layui-form-label">经营地址：</label>
       <div class="layui-input-block">
           <input autocomplete="off" class="layui-input" lay-verify="required"
                  id="address"
                  name="address"
                  style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"
                  placeholder="请点击右侧选择经营地址" required type="text"
                  v-model="form.address">
       </div>
       <!--隐藏域存放详细地址信息-->
       <input type="hidden" id="hiddenMap" name="map" value=""/><!--坐标-->
       <input type="hidden" id="hiddenProvince" name="province" value=""/><!--省-->
       <input type="hidden" id="hiddenArea" name="area" value=""/><!--市-->
       <input type="hidden" id="hiddenCounty" name="county" value=""/><!--区-->
       <div class="map">
           <button id="openMapBtn" type="button" class="layui-btn btn">点击地图选点</button>
       </div>
       <br/><br/><br/>
       <div id="mapBox" style="width: 100%;height: 100%;padding-left: 110px;display: none">
           <!--存放地图的容器-->
           <div id="container" ></div>
       </div>
   </div>
   

​ 至此就已经完成了项目代码！！！

功能测试：

1. 鼠标单击后，位置信息可以显示到地址框中

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-69DA9Xh2-1657800181254)

2. 单机保存按钮后，查看数据中的信息，已经更新成功！

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-glzRhfJf-1657800181255)

补充说明：

补充： 刚开始不熟悉geocoder()方法的返回值的时候，可以参考如下代码执行日志

console.log(result.regeocode.addressComponent.province);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SElnIIrR-1657800181255)

在输出日志中可以根据实际需要获取需要的参数，该项目中使用上面箭头所指数据，具体调用方法，详见上面代码；

bug记录

【问题】：

​ 前端向springCloud传输数据时有个数据格式错误，x-www-…

​ 这种错误是因为数据格式错误，前端传过来的数据是name=999&age=99 这种键值对格式的数据

​ 后端接口使用的是@RequestBody，该方法主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)；

​ 而之前传输的格式和接受的数据有格式冲突就会报这种错误

【方案】：

​ 增加如下代码

        'content-type':'application/json;charset=UTF-8',
        JSON.stringify(formData),

// An highlighted block
_this.layform.on('submit(btnSubmit)', function (data) {
    //表单数据formData
    var formData = data.field;
    $.ajax({
        url: "/**/**/**",
        headers: {
            'content-type':'application/json;charset=UTF-8',
            Authorization: "Bearer " + $.cookie("token")
        },
        method: "post",
        dataType: "json",
        data: JSON.stringify(formData),
        success: (res) => {
            if (res.code == 200) {
                layer.msg("更新成功", {icon: 1})
            }
        }
    })
});