caimei-authentic-www/components/SimpleAMap/index.vue

<template>
  <div class="a-map" id="aMap"></div>
</template>

<script>
import { geolocation, initGeocoder } from './common/utils'
export default {
  name: 'AMap',
  props: {
    zoom: {
      type: Number,
      default: 17
    },
    markerIcon: {
      type: String,
      default: '/location.png'
    },
    center: {
      type: Boolean,
      default: false
    },
    address: {
      type: String,
      default: ''
    },
    lnglat: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      marker: null,
      map: null,
      timer: null,
      geocoder: null
    }
  },
  methods: {
    async init () {
      if (this.lnglat) {
        console.log('经纬度定位')
        this.initMap(this.lnglat)
      } else if (this.address) {
        console.log('地址定位')
        this.initGeocoder()
      } else {
        console.log('高精度自动定位')
        this.geolocation()
      }
    },
    // 高精度定位
    async geolocation () {
      try {
        const result = await geolocation()
        this.$emit('position', {
          lng: result.position.lng,
          lat: result.position.lat
        })
        this.initMap(result.position)
      } catch (error) {
        this.initMap()
        alert('获取当前位置信息失败，已为您定位到当前城市！')
        console.log('获取当前位置信息失败，已为您定位到当前城市！')
      }
    },
    // 根据地址信息定位
    async initGeocoder () {
      try {
        this.geocoder = await initGeocoder()
        console.log(this.geocoder)

        this.geocoder.getLocation(this.address, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const position = result.geocodes[0].location
            this.initMap(position)
            this.$emit('position', {
              lng: position.lng,
              lat: position.lat
            })
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 初始化地图
    initMap (position) {
      this.map = new window.AMap.Map('aMap', {
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        zoom: this.zoom, // 初始化地图层级
        center: position // 初始化地图中心点
      })
      this.map.on('click', this.onMapClick)
      if (position) {
        this.map.add(this.initMarker(position))
      }
      this.initMapControl()
    },
    // 初始化标记点
    initMarker (position) {
      this.marker = new window.AMap.Marker({
        icon: this.markerIcon,
        position,
        anchor: 'bottom-center',
        draggable: true
      })
      this.marker.on('dragging', this.moveMarker)
      return this.marker
    },
    // 修改标记点
    onMapClick (map) {
      if (this.marker) this.map.remove(this.marker)
      if (this.center) this.map.setCenter(map.lnglat)
      this.map.add(this.initMarker(map.lnglat))
      this.$emit('position', {
        lng: map.lnglat.lng,
        lat: map.lnglat.lat
      })
    },
    // 标记点移动
    moveMarker (marker) {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        if (this.center) this.map.setCenter(marker.lnglat)
        this.$emit('position', {
          lng: marker.lnglat.lng,
          lat: marker.lnglat.lat
        })
      }, 200)
    },
    // 地图控件
    initMapControl () {
      window.AMap.plugin(
        ['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'],
        () => {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          this.map.addControl(new window.AMap.ToolBar())

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          this.map.addControl(new window.AMap.Scale())

          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          this.map.addControl(new window.AMap.MapType())

          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          // this.map.addControl(new window.AMap.Geolocation())
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
#aMap {
  height: 100%;
  min-height: 400px;
}
</style>