caimei-authentic-manager/src/components/location/index.vue

<template>
  <div class="map">
    <div id="allMap" />
    <div class="point">
      <span>您当前位置：</span>
      <span>{{ pointText }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 城市名称
    city: {
      type: String,
      default: ''
    },
    initPoint: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      map: null,
      latlng: null,
      marker: null
    }
  },
  computed: {
    pointText() {
      if (!this.latlng) {
        return '--,--'
      } else {
        return `${this.latlng.lat},${this.latlng.lng}`
      }
    }
  },
  watch: {
    latlng(nVal, oVal) {
      this.$emit('point', nVal)
    }
  },
  created() {
    this.$nextTick(() => {
      this.makeBiduMap()
    })
  },
  methods: {
    // 根据坐标初始化地图
    pointInit() {
      const pointArr = this.initPoint.split(',')
      const lat = parseFloat(pointArr[0])
      const lng = parseFloat(pointArr[1])
      // 初始化地图坐标
      const point = new window.BMapGL.Point(lng, lat)
      console.log(point)
      // 创建标记点对象模型
      this.marker = new window.BMapGL.Marker(point, { enableDragging: true })
      this.map.addOverlay(this.marker)
      this.map.centerAndZoom(point, 16)
    },
    // 默认初始化地图
    defInit() {
      // 初始化地图坐标 22.542802586057,114.10197962299
      const point = new window.BMapGL.Point(114.10237688976471, 22.542245357146264)
      // 创建标记点对象模型
      this.marker = new window.BMapGL.Marker(point, { enableDragging: true })
      this.map.addOverlay(this.marker)
      this.map.centerAndZoom(point, 16)

      // 如果有城市信息 就定位到城市
      if (this.city) return this.locationToCity()
      // 定位到ip
      this.locationToSelf()
    },

    // 对地图坐标的处理
    makeBiduMap() {
      // 创建地图模型
      this.map = new window.BMapGL.Map('allMap')
      // 初始化定位坐标
      if (this.initPoint) {
        this.pointInit()
      } else {
        this.defInit()
      }
      // 添加控件
      this.addControl()
      // 绑定事件
      this.addMapEvent()
    },

    // 添加控件
    addControl() {
      // 添加比例尺控件
      var scaleCtrl = new window.BMapGL.ScaleControl()
      this.map.addControl(scaleCtrl)
      // 添加缩放控件
      var zoomCtrl = new window.BMapGL.ZoomControl()
      this.map.addControl(zoomCtrl)
      // 允许鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true)
      // 添加城市列表控件
      var cityCtrl = new window.BMapGL.CityListControl()
      this.map.addControl(cityCtrl)
    },

    // 定位到当前位置
    locationToSelf() {
      const that = this
      var geolocation = new window.BMapGL.Geolocation()
      geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() === window.BMAP_STATUS_SUCCESS) {
          that.marker.setPosition(r.point)
          that.map.centerAndZoom(r.point, 16)
          that.latlng = r.point
          // console.log('您的位置：' + r.point.lng + ',' + r.point.lat)
        } else {
          console.log('failed' + this.getStatus())
        }
      })
    },

    // 地址解析（正）
    locationToCity() {
      var geo = new window.BMapGL.Geocoder()
      geo.getPoint(this.city, point => {
        if (point) {
          this.marker.setPosition(point)
          this.map.centerAndZoom(point, 16)
          this.latLng = point
        } else {
          console.log('您选择的地址没有解析到结果！')
        }
      }, this.city)
    },

    // 地图事件绑定
    addMapEvent() {
      this.marker.addEventListener('mouseup', e => {
        this.latlng = e.latLng
        // console.log('您的位置：' + e.latLng.lng + ',' + e.latLng.lat)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#allMap{
  width: 100%;
  height: 500px;
}
.point{
  margin-top: 16px;
}
</style>