VUE使用BMap地图获取当前ip的省市

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.获取结果如下

image.png