百度地图地址换坐标

最新推荐文章于 2024-08-20 15:32:18 发布

原创最新推荐文章于 2024-08-20 15:32:18 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue 详细地址查询经纬度

Vue 专栏收录该内容

6 篇文章

订阅专栏

该博客介绍基于百度地图 API ，在 Vue 开发中通过地址查询经纬度（不带地图）的方法。首先要获取百度地图秘钥 ak，还需解决跨域问题。在引入相关内容时，按常规引入会报错，加括号才能正常使用，未深究是否为版本问题。

基于百度地图 API ，通过地址查询经纬度（不带地图）

1.先获取百度地图秘钥 ak（不细说）

http://lbsyun.baidu.com/apiconsole/key?application=key#/home

2.解决跨域问题

基于vue开发

安装npm install vue-jsonp --save
main.js引入
```
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)
```
看到很多博文都是这么引入的 import VueJsonp from 'vue-jsonp'，我这么使用的时候，会有报错的，需要加括号才能正常使用，不懂是不是版本问题，没有深究。

使用

this.$jsonp("http://api.map.baidu.com/geocoding/v3/", {
    address: 需要查询经纬度的地址,
    output: "json",
    ak: 你的秘钥,
})
    .then((res) => {
    // location 经纬度
    console.log(res.result.location);
})
    .catch((err) => {
    console.log(err);
});