美文网首页
VUE 百度地图根据详细地址查询经纬度

VUE 百度地图根据详细地址查询经纬度

作者: Murphy_土豆 | 来源:发表于2021-04-12 11:42 被阅读0次

    前言

    根据门店详细地址,获取地址的经纬度传给后台

    准备内容

    安装josnp,解决跨域,不安转会报跨域问题

    执行命令:

    npm install vue-jsonp --save

    全局引入 - 入口文件main.js添加:

    import VueJsonp from 'vue-jsonp'

    Vue.use(VueJsonp)

    局部引入 - controller.js添加:

    import { jsonp } from 'vue-jsonp'

    基本使用方法:

    this.$jsonp(地址, 传参参数对象{} ).then(json => {

      // 返回的内容 console.log(json)

    }).catch(err => {

      console.log(err)

    })

    百度地图ak(密钥)

    用到的百度地图API,链接地址:

    http://lbs.baidu.com/index.php?title=webapi/guide/webservice-geocoding

    项目应用

    //获取百度地图坐标

    getBaiduMapPoint(){ 

        jsonp(`http://api.map.baidu.com/geocoder/v2/`,{

            output:'json',    

            ak:'你的ak',

            address: '详细地址'           

         }).then((res) => {                

            const location = res.result.location;                

            if (location) {                    

                this.Model.baiduLongitude = location.lng                    

                this.Model.baiduLatitude = location.lat       

            }

         })

    }

    相关文章

      网友评论

          本文标题:VUE 百度地图根据详细地址查询经纬度

          本文链接:https://www.haomeiwen.com/subject/jymtlltx.html