腾讯地图坐标至地址的转换(逆地址解析,经纬度转换成具体的地点)

参考文档:https://lbs.qq.com/webDemoCenter/glAPI/glServiceLib/geocoderGetAddress

坐标至地址转换

场景描述

在地图上,标注点后,我们可能期望得到的不仅仅是具体的经纬度,该点的具体名称也是用户所期望看到的。
所以就需要把点标记得到的经纬度转换成地址。

使用方法

参考官方文档,把例子原封不动拿到自己项目里使用,你会发现控制台:
腾讯地图坐标至地址的转换(逆地址解析,经纬度转换成具体的地点)_第1张图片

Cannot read properties of undefined (reading ‘Geocoder’)

在度娘上找不到解决方法,那我们就自己再好好的读一下文档,查一下Geocoder。
给出的解释是:
Geocoder方法可以提供逆地址解析,然后就给出了使用的例子,显然这对我们的报错解决没有任何帮助。
注意看,我们是怎么使用这个解析方法的:
var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
ok,方法没有用,那我们看看它的提供者service
service是服务类附加库。
相关的使用步骤和使用限制请参考:
https://lbs.qq.com/webApi/javascriptGL/glGuide/service
通过介绍我们就会知道,报上面错误的原因就是我们没有把这个服务类附加库引入我们的项目。
根据使用步骤,在index.html引入的腾讯地图的API内,key后面加上&libraries=service。
单单做完该步骤,Geocoder的问题是解决了,但是会有一个新的报错信息:
在这里插入图片描述

个人key控制台开启服务:WebserviceAPI的域名白名单

根据报错提示,我们登入控制台,编辑key的启用产品,勾选WebserviceAPI的域名白名单
不然会报:

{
    "status": 199,
    "message": "此key未开启WebserviceAPI功能,您可登录lbs.qq.com,进入控制台key管理界面,找到此key并设置启用WebserviceAPI",
    "id": "cbl9m4qih80"
}

腾讯地图坐标至地址的转换(逆地址解析,经纬度转换成具体的地点)_第2张图片

具体实例

this.geocoder = new TMap.service.Geocoder();
let location = new TMap.LatLng(this.form.repairLocationLatitude,this.form.repairLocationLongitude);
this.geocoder.getAddress({ location: location }).then((result) => {
          //result.result.address即为解析出来的地址
});

题外实例

像是有的使用场景是需要精确到房间的,可能我们就需要两个操作,先在地图上标注一个点,然后自己输入一个楼层房间号,例如:
腾讯地图坐标至地址的转换(逆地址解析,经纬度转换成具体的地点)_第3张图片
那我们最后期望得到的是成山路4#401,所以就涉及解析后的地址拼接。
由于用户可能会在点标记图层上操作多次,还是建议在上传具体地址的时候再拼接:
this.form.repairLocation = result.result.address + '-' + this.form.repairLocation;
同样涉及一个问题:
如果是修改的,那得到的地址就是之前组合过的,我们修改点标记肯定希望再传递的地址是新的点加上x#xxx,所以要把地址切割后再重新组合。
为了方便,拼接的时候使用了分割符,那最终的使用是:

this.geocoder.getAddress({ location: location }).then((result) => {
          if (this.form.repairLocation.includes('-')) {
            this.form.repairLocation = result.result.address + '-' + this.form.repairLocation.split('-')[1];
          } else {
            this.form.repairLocation = result.result.address + '-' + this.form.repairLocation;
          }
}

你可能感兴趣的:(腾讯地图,javascript,前端,腾讯地图)