VUE使用【高德地图】vue-amap自定义封装组件带搜索功能及回显标记功能

vue-amap的使用

情景描述：1.点击查看按钮弹出弹框显示地图，搜索地址后地图上进行选点获取经纬度、省市地区等信息，点击确定按钮关闭弹窗将获取到的信息填入表单
2.在表单已有经纬度数据时点击按钮地图根据经纬度信息回显标记到相应位置
效果如图：
地图搜索选点

点击确定将信息填入表单

step1.安装 npm install --save vue-amap
step2.main.js中引入配置

// 全局组件高德地图
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '你的应用key',
  plugin: [
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.PlaceSearch',
    "AMap.Autocomplete",
    'AMap.Geolocation',
    'AMap.Geocoder',
    "AMap.AMapUI",// UI组件
  ],
  v: '1.4.4',// 默认高德 sdk 版本为 1.4.4
  uiVersion: '1.0'
})

setp3.封装vue-amap组件 map.vue

<template>
  <div>
    <el-dialog
      class="container"
      append-to-body
      title="查看地图"
      :visible.sync="visible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      top="0vh"
      width="100%"
    >
      <div>
        <el-amap-search-box id="search" class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />//搜索框
        <el-amap class="amap-box" :zoom="amap.zoom" :center="amap.center" :plugin="amap.plugin" :events="amap.events">
          <el-amap-marker v-for="(marker, index) in amap.markers" :key="'marker' + index" :position="marker.position" />
          <el-amap-text
            v-for="(marker, index) in amap.markers"
            :key="'text' + index"
            :text="marker.text"
            :offset="marker.offset"
            :position="marker.position"
          />
        </el-amap>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sure">确 定</el-button>
        <el-button @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
function getFormData() {
  return {
    lat: '39.909186',
    lon: '116.39746',
    orgAddr: '区政府',
    province: '',
    city: '',
    district: ''
  }
}
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager()
export default {
  name: 'Map',
  data() {
    const vm = this
    return {
      visible: false,
      amapManager,
      // form对象
      dataForm: getFormData(),
      // 地图搜索对象
      searchOption: {
        city: '全国',
        citylimit: true
      },
      // 地图对象
      amap: {
        zoom: 16,
        center: [116.319802, 39.98294],
        events: {
          // 点击获取地址的数据
          click(e) {
            const { lng, lat } = e.lnglat
            vm.dataForm.lon = lng
            vm.dataForm.lat = lat
            // 这里通过高德 SDK 完成。
            var geocoder = new AMap.Geocoder({
              radius: 1000,
              extensions: 'all'
            })
            geocoder.getAddress([lng, lat], function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  // console.log('点击获取地址的数据', result)
                  vm.dataForm.orgAddr = result.regeocode.formattedAddress
                  vm.dataForm.province = result.regeocode.addressComponent.province
                  vm.dataForm.city = result.regeocode.addressComponent.city
                  vm.dataForm.district = result.regeocode.addressComponent.district
                  vm.dataForm.lat = lat ? lat.toString() : ''
                  vm.dataForm.lon = lng ? lng.toString() : ''
                  vm.amap.markers = []
                  const obj = {
                    position: [lng, lat],
                    text: result.regeocode.formattedAddress,
                    offset: [0, 30]
                  }
                  vm.amap.markers.push(obj)
                }
              }
            })
          }
        },
        plugin: ['ToolBar'],
        markers: [
          {
            position: [116.319802, 39.98294],
            text: '中关村',
            offset: [0, 30]
          }
        ]
      }
    }
  },
  methods: {
    // 地图搜索回调
    onSearchResult(pois) {
      const vm = this
      vm.amap.markers = []
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach((poi, index) => {
          const { lng, lat } = poi
          if (index === 0) {
            lngSum = lng
            latSum = lat
            const obj = {
              position: [poi.lng, poi.lat],
              text: poi.name,
              offset: [0, 30]
            }
            vm.amap.markers.push(obj)
            console.log('地图搜索回调', poi)
            vm.dataForm.orgAddr = poi.name
            vm.dataForm.lat = poi.lat ? poi.lat.toString() : ''
            vm.dataForm.lon = poi.lng ? poi.lng.toString() : ''
          }
        })
        vm.amap.center = [lngSum, latSum]
      }
    },
    // 打开弹窗
    open(data) {
      const vm = this
      vm.dataForm = getFormData()
      if (data) {
        if (data.longitude == 'undefined' && data.latitude == 'undefined') {
          vm.amap.markers = [
            {
              position: [116.319802, 39.98294],
              text: '区政府',
              offset: [0, 30]
            }
          ]
          vm.amap.center = [116.319802, 39.98294]
        } else {
        //通过已有的数据进行回显标记
          vm.amap.markers = [
            {
              position: [data.longitude, data.latitude],
              text: data.address,
              offset: [0, 30]
            }
          ]
          vm.amap.center = [data.longitude, data.latitude]
        }
      }
      vm.visible = true
    },
    // 关闭弹窗
    handleClose() {
      const vm = this
      vm.visible = false
      vm.dataForm = getFormData()
      vm.amap.markers = []
      const obj = {
        position: [vm.dataForm.lon, vm.dataForm.lat],
        text: vm.dataForm.orgAddr,
        offset: [0, 30]
      }
      vm.amap.markers.push(obj)
      vm.amap.center = [vm.dataForm.lon, vm.dataForm.lat]
    },
    // 提交方法
    sure() {
      const vm = this
      this.$emit(
        'updateLocation',
        vm.dataForm.orgAddr,
        vm.dataForm.lon,
        vm.dataForm.lat,
        vm.dataForm.province,
        vm.dataForm.city,
        vm.dataForm.district
      )
      vm.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 80% !important;
  height: 80%;
  margin: auto;
  overflow: hidden;
}
.amap-box {
  height: 64vh;
}
.search-box {
  position: absolute;
  z-index: 5;
  width: 70%;
  left: 13%;
  top: 10px;
  height: 30px;
}
.search-box .el-input {
  float: left;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 0 7px 7px 0;
  outline: none;
  position: relative;
}
.search-box .el-button {
  position: absolute;
  right: 0;
  top: 1px;
  width: 20%;
  background: #38a28a;
  border-radius: 0 7px 7px 0;
  border: none;
  color: #fff;
  outline: none;
}
.tip-box {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 35px;
  padding: 10px 0;
  background-color: #fff;
  opacity: 0.8;
}
</style>

在所需要的文件中引用地图组件

<template>
  <div>
    <el-form ref="form" :model="form" append-to-body label-width="110px">
      <el-col :span="12">
        <el-form-item label="获取地址" class="form-item">
          <el-button type="primary" size="small" @click="openMap">获取地址</el-button>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="所属行政区" class="form-item">
          <el-input v-model="form.district" size="small" placeholder="所属行政区" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="所属省份" class="form-item">
          <el-input v-model="form.province" size="small" placeholder="所属省份" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属城市" class="form-item">
          <el-input v-model="form.city" size="small" placeholder="所属城市" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="经度" class="form-item">
          <el-input v-model="form.longitude" size="small" placeholder="经度" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="纬度" class="form-item">
          <el-input v-model="form.latitude" size="small" placeholder="纬度" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="详细地址" class="form-item">
          <el-input v-model="form.address" size="small" placeholder="详细地址" />
        </el-form-item>
      </el-col>
    </el-form>
    //使用地图组件
    <Map ref="map" @close="$refs.map.close()" @updateLocation="updateLocation" />
  </div>
</template>

<script>
//引入地图组件
import Map from './map.vue'
export default {
//注册组件
  components: {
    Map
  },
  data() {
    return {
      form: {
        address: '',
        province: '',
        city: '',
        latitude: 0, // 纬度
        longitude: 0, // 经度
        district: ''
      }
    }
  },
  methods: {
    openMap() {
      if (this.form.longitude == 'undefined' && this.form.latitude == 'undefined') {
        this.$refs.map.open()
      } else {
        this.$refs.map.open(this.form)
      }
    },
    updateLocation(orgAddr, lon, lat, province, city, district) {
      this.form = {
        address: orgAddr,
        province: province,
        city: city,
        latitude: lat, // 纬度
        longitude: lon, // 经度
        district: district
      }
    }
  }
}
</script>