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

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=your key"></script> //key找個適合例如：160cab8ad6c50752175d76e61ef92c50

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

externals: {
'AMap': 'AMap',
}

3、在vue文件中使用

<template>
<div id="my_container"></div>
</template>
<script>
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()
});
},
},
}
</script>

<style scoped>
#my_container{
margin-left: 140px;
height: 400px;
width: calc(100% - 140px);
}
</style>

轉載于:https://www.cnblogs.com/gerry/p/11049474.html

總結

以上是生活随笔為你收集整理的vue引入高德地图获取经纬度地址的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。