erp/resources/frontend/src/components/mapDrag/index.vue

<template>
  <div class="m-map">
    <div class="search" v-if="placeSearch">
      <div id="js-result" v-show="searchKey" class="result"></div>
    </div>
    <div id="js-container" class="map">正在加载数据 ...</div>
  </div>
</template>

<script>
import remoteLoad from '@/util/remoteLoad.js'
window._AMapSecurityConfig = {
  securityJsCode: '4c7f32be1ae23595dd423fbdf337df3f'
}
// import { MapKey } from './config'
export default {
  name: 'MapDrag',
  props: {
    searchKey: {
      default: ''
    }
  },
  data () {
    return {
      // searchKey: "",
      placeSearch: null,
      dragStatus: false,
      AMapUI: null,
      AMap: null,
      city: '',
      geolocation: null
    }
  },
  watch: {
    searchKey () {
      if (this.searchKey === '') {
        this.placeSearch.clear()
      }
    }
  },
  async created () {
    // 已载入高德地图API，则直接初始化地图
    if (window.AMap && window.AMapUI) {
      this.initMap()
      // 未载入高德地图API，则先载入API再初始化
    } else {
      await remoteLoad('https://webapi.amap.com/maps?v=2.0&key=4b083a38fc17ad7c5e3df667931e0cf0')
      await remoteLoad('https://webapi.amap.com/ui/1.1/main.js')
      this.initMap()
    }
  },
  methods: {
    // 搜索
    handleSearch () {
      console.log(this.searchKey, '33333oooo')
      if (this.searchKey) {
        this.placeSearch.search(this.searchKey)
      }
    },
    // 实例化地图
    initMap () {
      // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
      const AMapUI = (this.AMapUI = window.AMapUI)
      const AMap = (this.AMap = window.AMap)

      const that = this

      AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
        const mapConfig = {
          zoom: 16
        }
        const map = new AMap.Map('js-container', mapConfig)
        // 获得当前定位的城市
        AMap.plugin('AMap.CitySearch', function () {
          const citySearch = new AMap.CitySearch()
          console.log('citySearch', citySearch)
          // 加载地图搜索插件
          AMap.plugin('AMap.PlaceSearch', () => {
            that.placeSearch = new AMap.PlaceSearch({
              pageSize: 5,
              pageIndex: 1,
              citylimit: false,
              map: map,
              panel: 'js-result'
              // city: that.city, // 设定搜索城市
            })
            AMap.Event.addListener(that.placeSearch, 'listElementClick', function (e) {
              that.$emit('listElementClick', e)
            })
            AMap.Event.addListener(that.placeSearch, 'markerClick', function (e) {
              that.$emit('listElementClick', e)
            })
          })
          // citySearch.getLocalCity(function (status, result) {
          //   console.log('getLocalCity', status, result)
          //   if (status === 'complete' && result.info === 'OK') {
          //     // 查询成功，result即为当前所在城市信息
          //     that.city = result.adcode
          //   }
          // })
        })
        // 启用工具条
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'], function () {
          map.addControl(
            new AMap.ToolBar({
              position: 'RB'
            })
          )
          map.addControl(
            new AMap.Scale({
              position: 'LB'
            })
          )
        })
        // 创建地图拖拽
        const positionPicker = new PositionPicker({
          mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
          map: map // 依赖地图对象
        })

        // 启动拖放
        positionPicker.start()
      })
    }
  }
}
</script>

<style lang="css" scoped>
.m-map {
  max-width: 700px;
  max-height: 462px;
  position: relative;
}
.m-map .map {
  min-width: 700px;
  min-height: 462px;
}
.m-map .search {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 285px;
  z-index: 1;
}

.m-map .result {
  max-height: 300px;
  overflow: auto;
  margin-top: 10px;
}
</style>