vue中调用百度地图获取经纬度的实现

项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图。

vue中调用百度地图获取经纬度的实现_第1张图片

默认自动获取当前位置经纬度

vue中调用百度地图获取经纬度的实现_第2张图片

拖动小红标 获取经纬度

vue中调用百度地图获取经纬度的实现_第3张图片

关键词 查询获取经纬度

前期准备

首先,我们需要取百度官方申请一个地图api秘钥,https://lbsyun.baidu.com/apiconsole/key 进入后在应用管理,我的应用去申请即可。

申请好以后,我们打开vue项目中public文件下的index.html文件,拼接百度AK值并引入

  

如上所示,红色区域为AK值,自行拼接自己的,可以设置权限为公开或者针对网址白名单。

我使用了elementui的弹窗,输入框,提示,如果你没使用elementui,记得更换哦!

HTML代码

JS代码

CSS代码

完整代码



到此这篇关于vue中调用百度地图获取经纬度的实现的文章就介绍到这了,更多相关vue调用百度地图获取经纬度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue中调用百度地图获取经纬度的实现)