javascript怎样调用api js怎么调用api接口

项目场景：

项目需求：

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

项目环境：

html 、vue 、js 、springCloud

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

---

使用步骤：

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



4. 获取到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>

1. 下面是核心代码

<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)

3. 单机保存按钮后，查看数据中的信息，已经更新成功！
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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})
            }
        }
    })
});