wuye / webui

  <template>

    <div class="select-map-pos-container">

      <div id="selectMap" class="map-view"></div>
      <div class="map-hint">点击地图选择位置，经纬度将自动填充</div>

    </div>
  </template>
  
  <script>
  import { getCommunityId } from '@/api/community/communityApi'
  
  export default {
    name: 'SelectMapPos',
    props: {
      elementId: {
        type: String,
        default: 'selectMap'
      },
      initData: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        map: null,
        marker: null,

        communityId: ''

      }
    },
    mounted() {
      this.communityId = getCommunityId()

    },
    methods: {

      initMap(_data) {

        let _lng = 116.397128
        let _lat = 39.916527

        if (_data.lng) _lng = _data.lng
        if (_data.lat) _lat = _data.lat

        if (this.map) {
          this.map.destroy()
          this.map = null

        }

        this.marker = null
  
        const map = new window.AMap.Map('selectMap', {
          center: [_lng, _lat],
          zoom: 13,
          resizeEnable: true
        })
  
        const _this = this
  
        map.on('click', function (ev) {
          const lng = ev.lnglat.getLng()
          const lat = ev.lnglat.getLat()

          _this.$emit('position-change', { lat, lng })

          if (!_this.marker) {
            _this.marker = new window.AMap.Marker({
              position: [lng, lat],
              map: map,
              icon: new window.AMap.Icon({
                size: new window.AMap.Size(25, 35),
                imageSize: new window.AMap.Size(25, 35),
                image: '/img/maper.png'
              })
            })
          } else {
            _this.marker.setPosition([lng, lat])

          }

        })

        this.map = map
  
        // 如果传入了已有坐标，在地图上显示标记
        if (_data.lng && _data.lat) {
          this.marker = new window.AMap.Marker({
            map: this.map,
            position: [_lng, _lat],
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(25, 35),
              imageSize: new window.AMap.Size(25, 35),
              image: '/img/maper.png'
            })
          })
        }

      },

      addMarker(position) {

        if (this.marker) {
          this.marker.setMap(null)

          this.marker = null

        }

        this.marker = new window.AMap.Marker({

          map: this.map,

          position: position,
          icon: new window.AMap.Icon({
            size: new window.AMap.Size(25, 35),
            imageSize: new window.AMap.Size(25, 35),
            image: '/img/maper.png'
          })

        })

        this.map.setCenter(position)
        this.map.setZoom(16)
      },

      updatePosition(lat, lng) {
        if (!this.map) return

        this.addMarker([lng, lat])

      }
    },

    beforeDestroy() {

      if (this.map) {
        this.map.destroy()
        this.map = null
      }
    }
  }
  </script>
  
  <style scoped>
  .select-map-pos-container {
    width: 100%;

  }

  .map-view {
    width: 100%;
    height: 400px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
  .map-hint {
    font-size: 12px;
    color: #909399;
    margin-top: 6px;
  }
  </style>