vue项目根据详细地址获取经纬度(通过高德API)
一、在高德控制台key的获取二、Jsonp的使用三、查看success回调返回的打印结果一、在高德控制台key的获取
网上找了很多,但是多多少少有点跑不通,这个是我今日亲测。
服务平台的类型是Web服务,如果是JS api生成的key不能获取到。
错误演示:
高德使用手册上写的很清楚:手册
二、Jsonp的使用
1.引入jQuery我在项目中使用的方法是在index.html中引入jQuery,也可以使用vue-jsonp第三方类库(想尝试但是没有跑通,想使用的小伙伴可以自行尝试)。
以下是引入代码:
<script src="/jquery/2.1.4/jquery.min.js"></script>
2.在methods中定义方法
// 根据地址获取经纬度getLocation () {let that = thisconsole.log(that.project_location)let data = {key: '你的key',address: '北京市昌平区'}$.ajax({url: '/v3/geocode/geo',type: 'get',dataType: 'jsonp',data,success: function (data) {// console.log(data.geocodes[0].location)//获取到的经纬度console.log(data)}})},
3.方法的调用
mounted () {this.getLocation()}