在大多数人的刻板印象里,平时有关地图的开发,似乎只是前端的活。但是其实高德地图有自己的web服务api,后端也可以调用,比如在我们的物联网项目中,设备会实时、主动向服务器发送经纬度,后端获得经纬度后,想要知道设备的当前位置,如果此时前端调用高德服务那就太麻烦了,而且我们还有向外提供服务的API,其他人也可以调用我们的接口传入经纬度获得地址详情,那么此时其实可以后端直接调用高德的服务,根据经纬度得到解析后的结果,这个就是逆地理解析。除此之外,我们还用过检索行政区域,因为如果前端保存全国所有省市区的话,是写死的,如果有的行政区域发生变化了,前端展示的还是之前的,那么发货、围栏设置、和其他平台对接都会受到影响。
根据高德的 web服务文档,他们的主要服务功能有很多,包括地理/逆地理编码、路径规划、行政区域查询、交通事件、IP定位、静态地图、坐标转换、天气查询、轨迹纠偏等等。
今天将使用node.js,express框架搭一个后端服务器,以逆地理解析为例,实现调用高德web服务api。
逆地理编码概念
将经纬度转换为详细结构化的地址,且返回附近周边的 POI、AOI 信息。
一、提前准备
根据高德地图官网的 教程 ,获得账号与密钥ak。此处不一一操作了。这里注意,现在服务平台选择web服务,不然调用接口时会报错,前端地图绘制的选Web端(JS API)。
二、搭建极简后端服务器
建立一个server.js的文件,输入一下代码。
const express = require("express");
const app = express();
app.listen(3000, () => {
console.log("服务开启成功");
});
打开控制台cmd,输入node server启动服务,看到服务开启成功文字,就知道这个简单的服务器搭好了。
三、后台连接第三方服务
我这里使用了axios,先控制台npm i axios,然后再server.js中引入,写法都是一样的。 根据官网的文档( 点击链接 )操作,逆地理解析是一个get方法,所以用axios.get,url拼接数据。
直接复制高德文档服务示例中的代码,在server.js中将上面的key改为自己的key,为了便于观测,将output=xml,改为JSON。
然后此时重启服务器。此时经纬度是116.310003,39.991957,发现调用成功了。
这里简单实现了需求,那其他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调用接口,获得数据,并将数据展示到页面上。
前端代码:
接口返回的数据大概是如下图的,如果真的要用,可以后端化简一下再返回给前端。
六、操作
写了一些经纬度进行测试。圆满成功!撒花!