<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密鑰"></script>

<template>
  <div class='loction'>
    <div>位置信息:{{locationMsg}}</div>
    <!-- 地圖容器 -->
    <div id="allmap"></div>
  </div>
</template>
 
 
<style>
.loction{
  width: 300px;
  height: 300px;
}
#allmap{
  width: 300px;
  height: 300px;
}
</style>

      const map = new window.BMap.Map('allmap') // 創(chuàng)建Map實例
 
      // 開啟SDK輔助定位獲取當前位置信息
      const getLocation = new window.BMap.Geolocation()
      getLocation.enableSDKLocation()
      getLocation.getCurrentPosition((position) => {  // position中是獲取到的定位相關數(shù)據(jù)
 
        // 獲取城市和省
        const city = position.address.city
        const province = position.address.province
        // 獲取經(jīng)度和緯度
        const latitude = position.latitude
        const longitude = position.longitude
        this.locationMsg = province + city
 
        const point = new window.BMap.Point(position.point) // 設置中心點坐標
        map.centerAndZoom(point, 15)     // 地圖初始化，同時設置地圖展示級別為15
        const marker= new window.BMap.Marker(position.point) // 創(chuàng)建標注
        map.addOverlay(marker) // 將標注添加到地圖中
        map.panTo(position.point, 15)  //讓指定位置移動到地圖中心
 
 
        // 開啟marker拖拽并監(jiān)聽拖拽后的位置信息
        marker.enableDragging() // 可拖拽標注
        const _this = this
        marker.addEventListener('dragend', function (e) {
          // alert('當前位置：' + e.point.lng + ', ' + e.point.lat)
          const nowPoint = marker.getPosition() // 拖拽完成之后坐標的經(jīng)緯度
          console.log(nowPoint, '拖拽后的經(jīng)緯度')
          map.centerAndZoom(nowPoint, 15)
 
          // 用所定位的經(jīng)緯度查找所在地省市街道等信息
          const gc = new window.BMap.Geocoder()
          gc.getLocation(nowPoint, function (rs) {
            console.log(rs, '拖拽后的位置')
            _this.locationMsg = rs.address
          })
        })
      }, () => {
        this.locationMsg = '定位失敗!'
      }, { provider: 'baidu' })

setTimeout(() => {
 
    map.panTo(this.newPosition, 16)
 
},200)