vue2/3 - 安装使用百度地图并获取当前城市名称、经纬度、省市区等信息，vue百度地图根据用户当前定位获取所在地区的省市区名称及详细街道，百度地图如何获取地理位置定位数据，拿到当前所在的城市教程！

在Vue项目中安装并使用百度地图以获取当前城市名称、经纬度和省市区信息，你需要按照以下步骤操作：

1. 安装百度地图JavaScript SDK。

npm install @vue/baidu-map --save

2. 在Vue项目中全局或局部注册BaiduMap组件。

全局注册（在main.js或main.ts中）：

import Vue from 'vue'
import BaiduMap from '@vue/baidu-map'
 
Vue.use(BaakMap, {
  ak: '你的百度地图ak' // 替换为你的百度地图ak
})

局部注册（在组件中）：

import { BaiduMap, BMap } from '@vue/baidu-map'
 
export default {
  components: {
    BaiduMap
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const map = new BMap.Map('map') // 假设你的地图容器的id为map
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
      
      // 其他地图配置和方法...
    }
  }
}

3. 使用百度地图API获取当前城市名称、经纬度和省市区信息。

methods: {
  initMap() {
    const map = new BMap.Map('map') // 假设你的地图容器的id为map
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
 
    // 获取当前地图视野的中心点经纬度
    const geolocation = new BMap.Geolocation()
    geolocation.getCurrentPosition(function(r) {
      if (this.getStatus() == 0) {
        const mk = new BMap.Marker(r.point)
        map.addOverlay(mk)
        map.panTo(r.point)
 
        // 获取位置信息
        const geoc = new BMap.Geocoder()
        geoc.getLocation(r.point, function(rs) {
          const addComp = rs.addressComponents
          console.log('当前城市：', addComp.city)
          console.log('经纬度：', r.point.lng + ',' + r.point.lat)
          console.log('省市区：', addComp.province + '-' + addComp.city + '-' + addComp.district)
        })
      } else {
        console.log('failed to get location', this.getStatus())
      }
    }, { enableHighAccuracy: true })
  }
}

确保你的Vue项目中有一个HTML元素用于显示地图，例如：

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>

以上代码实现了在Vue项目中使用百度地图API获取当前城市名称、经纬度和省市区信息的功能。记得替换new BMap.Point(116.404, 39.915)中的经纬度为你想要初始化地图的点，并替换ak为你的百度地图ak。