node.js+express+vue+axios调用第三方接口 高德地图web服务api 实现逆地理解析,前后端通信

876 阅读3分钟

在大多数人的刻板印象里,平时有关地图的开发,似乎只是前端的活。但是其实高德地图有自己的web服务api,后端也可以调用,比如在我们的物联网项目中,设备会实时、主动向服务器发送经纬度,后端获得经纬度后,想要知道设备的当前位置,如果此时前端调用高德服务那就太麻烦了,而且我们还有向外提供服务的API,其他人也可以调用我们的接口传入经纬度获得地址详情,那么此时其实可以后端直接调用高德的服务,根据经纬度得到解析后的结果,这个就是逆地理解析。除此之外,我们还用过检索行政区域,因为如果前端保存全国所有省市区的话,是写死的,如果有的行政区域发生变化了,前端展示的还是之前的,那么发货、围栏设置、和其他平台对接都会受到影响。

根据高德的 web服务文档,他们的主要服务功能有很多,包括地理/逆地理编码、路径规划、行政区域查询、交通事件、IP定位、静态地图、坐标转换、天气查询、轨迹纠偏等等。

今天将使用node.js,express框架搭一个后端服务器,以逆地理解析为例,实现调用高德web服务api。

逆地理编码概念

将经纬度转换为详细结构化的地址,且返回附近周边的 POI、AOI 信息。

一、提前准备

根据高德地图官网的 教程 ,获得账号与密钥ak。此处不一一操作了。这里注意,现在服务平台选择web服务,不然调用接口时会报错,前端地图绘制的选Web端(JS API)。

image.png

二、搭建极简后端服务器

建立一个server.js的文件,输入一下代码。

const express = require("express");
const app = express();
app.listen(3000, () => {
  console.log("服务开启成功");
});

打开控制台cmd,输入node server启动服务,看到服务开启成功文字,就知道这个简单的服务器搭好了。

image.png

三、后台连接第三方服务

我这里使用了axios,先控制台npm i axios,然后再server.js中引入,写法都是一样的。 根据官网的文档( 点击链接 )操作,逆地理解析是一个get方法,所以用axios.get,url拼接数据。

image.png

直接复制高德文档服务示例中的代码,在server.js中将上面的key改为自己的key,为了便于观测,将output=xml,改为JSON。

然后此时重启服务器。此时经纬度是116.310003,39.991957,发现调用成功了。

image.png

这里简单实现了需求,那其他api的调用,也是类似的了。但是这样还是太简单了,现在做一个前后端联动,前端传入经纬度,调用后端接口获得相应的地理信息。

四、写一个后端接口

这里写一个get方法,参数location。记得装一下axios。

app.use(cors());
let key = '你的key'
app.get('/getAddress', function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域
  console.log(req.query.location)
  let url =`https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${req.query.location}&key=${key}&radius=1000&extensions=all`
  axios.get(url).then(r=>{
    res.send(r.data.regeocode)
  }).catch(err=>{
    res.send('error',err)
  })
})

五、前端代码

前端画一个简单页面,按钮绑定一个search事件,使用axios调用接口,获得数据,并将数据展示到页面上。 image.png 前端代码:

image.png 接口返回的数据大概是如下图的,如果真的要用,可以后端化简一下再返回给前端。

image.png

六、操作

写了一些经纬度进行测试。圆满成功!撒花! image.png

image.png