1.首先获取百度地图密钥,然后引入到index.html里面
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
2.安装BMap
npm install bmap
3.在vue.config.js文件configureWebpack中加入以下代码
configureWebpack: {
externals: {
"BMap": 'BMap'
},
},
4.在页面中引入BMap并调用
<script>
import BMap from 'BMap'
export default {
data() {
return {
};
},
mounted() {
this.city()
},
methods: {
city(){ //定义获取城市方法
const geolocation = new BMap.Geolocation();
var _this = this
geolocation.getCurrentPosition(function getinfo(position){
console.log(position)
let city = position.address.city; //获取城市信息
let province = position.address.province; //获取省份信息
}, function(e) {
_this.LocationCity = "定位失败"
}, {provider: 'baidu'});
},
},
};
</script>
5.获取结果如下