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

2021-04-12  本文已影响0人  Murphy_土豆

前言

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

准备内容

安装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       

        }

     })

}

上一篇下一篇

猜你喜欢

热点阅读