| js调用高德地图API接口 | 您所在的位置：网站首页 › 经纬度坐标的写法怎么写 › js调用高德地图API接口 |
js调用高德地图API接口
|
项目场景：
项目需求：
需要使用jQuery调用高德地图API接口,实现鼠标点击地图后，返回地址的详细信息（如省，市，县/区，街道等等）、坐标 项目环境： html 、vue 、js 、springCloud 该案例中调用的方法采用js写，方便读者使用 使用步骤：首先需要再高德官方地图高德官方地图中注册账号，获取key和安全密钥高德地图官网API 应用管理–>我的应用–>创建应用，名称自定义，点击保存后会得到如下界面中的key和密钥 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a1DGaARx-1657800181253) 获取到key和密钥之后就可以使用了，html中使用方式如下 注意后面的 ‘&plugin=AMap.Geocoder’ 插件的使用方式有两种，这是其中的一种，具体可以查看高德地图官方文档 // 高德地图秘钥，必须在加载JSAPI load.js文件之前 window._AMapSecurityConfig = { securityJsCode: '放入你上面的申请的密钥' }下面是核心代码 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); } 注意！！！其中最主要的是id为container的容器，该容器用来存放地图对象，其外面的div是方便用于调整显示格式，当在使用时你可以根据实际情况进行选择；是在原有的基础上加了4个隐藏域，存放相应详细信息 经营地址： 点击地图选点 至此就已经完成了项目代码！！！ 功能测试： 鼠标单击后，位置信息可以显示到地址框中 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-69DA9Xh2-1657800181254) 单机保存按钮后，查看数据中的信息，已经更新成功！ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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}) } } }) }); |
【本文地址】