vue 获取用户位置 高德_vue引入高德地图获取经纬度地址

1、在index.html引入高德地图

//key找个适合例如：160cab8ad6c50752175d76e61ef92c50

2、在webpack.base.conf.js 配置引入

externals: {

'AMap': 'AMap',

}

3、在vue文件中使用

import AMap from 'AMap'

export default {

name: "company_manage",

data () {

return {

ruleForm: {

name: '',

phone: '',

addr: '',

long: '',

lat: '',

start_work_time: '',

end_work_time: '',

},

}

},

mounted:function () {

this.init()

},

methods: {

init() {

var map = new AMap.Map('my_container',{

resizeEnable: true,

zoom: 18,

})

AMap.plugin('AMap.Geolocation',function(){ //异步加载插件

var geolocation = new AMap.Geolocation()

map.addControl(geolocation)

})

var geocoder,marker;

function regeocoder(lnglatXY,that) {

AMap.plugin('AMap.Geocoder',function(){

var geocoder = new AMap.Geocoder({

radius: 1000,

extensions: "all"

});

geocoder.getAddress(lnglatXY, function(status, result) {

if (status === 'complete' && result.info === 'OK') {

var address = result.regeocode.formattedAddress;

that.ruleForm.addr = address  //兑换地址

}

});

if(!marker){

marker = new AMap.Marker();

map.add(marker);

}

marker.setPosition(lnglatXY);

})

}

var that = this

map.on('click', function(e) {

var lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()];

regeocoder(lnglatXY,that)

that.ruleForm.long = e.lnglat.getLng()

that.ruleForm.lat = e.lnglat.getLat()

});

},

},

}

#my_container{

margin-left: 140px;

height: 400px;

width: calc(100% - 140px);

}