关于VUE使用vue-jsonp解决请求百度逆变码接口地址问题

原创于 2025-09-12 16:56:11 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

如果你的项目不需要展示地图，仅仅是为了调用百度逆地理编码的HTTP接口来获取地址信息，那么 vue-jsonp 是一个更轻量的选择。它专门用于处理JSONP请求，而百度地图的逆地理编码API支持JSONP方式调用。

安装方法：

npm install vue-jsonp --save

在 main.js 中注册：

import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)

基本使用方法：
在Vue组件中：

<template>
  <div>
    <button @click="getReverseGeocode(116.404, 39.915)">获取逆地理编码</button>
    <p>地址信息: {{ address }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ak: 'YOUR_BAIDU_MAP_AK', // 替换为你在百度地图开放平台申请的应用AK
      address: ''
    }
  },
  methods: {
    getReverseGeocode(lng, lat) {
      const url = `https://api.map.baidu.com/reverse_geocoding/v3/?ak=${this.ak}&output=json&coordtype=wgs84ll&location=${lat},${lng}`:cite[5]
      this.$jsonp(url)
        .then(res => {
          if (res && res.result) {
            const addressComponent = res.result.addressComponent
            this.address = `${addressComponent.province}${addressComponent.city}${addressComponent.district}${addressComponent.street}${addressComponent.streetNumber}`
          }
        })
        .catch(err => {
          console.error('逆地理编码请求失败:', err)
        })
    }
  }
}
</script>