vue.config.js
configureWebpack: config => {
config["externals"] = {
AMap: "AMap" // 高德地图配置
};
}
地图组件.vue
<template>
<div class="box">
<div
id="container"
style="width:500px; height:300px"
></div>
</div>
</template>
<script>
import AMap from 'AMap' // 引入高德地图
export default {
mounted () {
this.test()
},
methods: {
test () {
var geocoder = new AMap.Geocoder({
city: "", // 默认:“全国”
radius: 1000 // 范围,默认:500
});
geocoder.getAddress(["104.202818", "30.547344"], function (status, result) {
if (status === 'complete' && result.regeocode) {
var addressComponent = result.regeocode.addressComponent;
console.log('addressComponent:', addressComponent.city)
} else {
log.error('根据经纬度查询地址失败')
}
});
}
}
}
</script>
public/index.html
// &plugin=AMap.Geocoder 可以引入Geocoder 不然会报错 AMap.Geocoder is not a constructor
<script
type="text/javascript"
src="http://webapi.amap.com/maps?v=1.4.4&key=6f79e2a127d6a4ae63440723254c04b0&plugin=AMap.Geocoder"
></script>