最近遇到一個(gè)地圖相關(guān)需求术吝，要求用戶在地圖上點(diǎn)擊選擇地點(diǎn)排苍，地點(diǎn)可搜索凑队，選擇后帶出坐標(biāo)及具體位置漩氨，點(diǎn)標(biāo)記只有一個(gè)叫惊，隨著鼠標(biāo)點(diǎn)擊的位置定位抡草，這里選擇使用vue-amap來(lái)實(shí)現(xiàn)康震，上手較快，實(shí)現(xiàn)效果如如下：

image.png

這里我是用彈窗組件的方式引入的凝颇，部分代碼用到了elementUI，可以適當(dāng)改動(dòng)，直接上代碼，組件如下：

<template>
  <el-dialog top="5vh" :append-to-body="true" title="獲取地圖坐標(biāo)" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px">
    <div class="amap-page-container">
      <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
      <div class="toolbar">
        當(dāng)前坐標(biāo): {{ lng }}, {{ lat }}
        address: {{ address }}
        <el-button type="primary" @click="select">確定</el-button>

      </div>
      <el-amap
        vid="amapDemo2"
        :center="mapCenter"
        :zoom="zoom"
        class="amap-demo"
        :events="events"
        :plugin="plugin"
      >
        <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" />
      </el-amap>

    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'AmapPage',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    makerPosition: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data: function() {
    const self = this
    return {
      zoom: 12,
      center: [0, 0],
      address: '',
      markers: [
        {
          position: this.makerPosition
        }
      ],
      searchOption: {
        city: '上海',
        citylimit: false
      },
      mapCenter: [121.59996, 31.197646],
      plugin: [{
        pName: 'ToolBar',
        events: {
          init(instance) {
          }
        }
      }],
      events: {
        click(e) {
          const { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
          self.markers[0].position = [lng, lat]

          // 這里通過(guò)高德 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) {
                self.address = result.regeocode.formattedAddress
                self.$nextTick()
              }
            }
          })
        }
      },
      lng: 0,
      lat: 0
    }
  },
  created() {
    this.mapCenter = this.makerPosition
    this.lng = this.makerPosition[0]
    this.lat = this.makerPosition[1]
  },
  methods: {
    onSearchResult(pois) {
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(poi => {
          const { lng, lat } = poi
          lngSum += lng
          latSum += lat
        })
        const center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.mapCenter = [center.lng, center.lat]
      }
    },
    handleClose(done) {
      this.$emit('update:dialogVisible', false)
      this.$nextTick(() => {
        done()
      })
    },
    select() {
      this.$emit('update:dialogVisible', false)
      this.$emit('update:makerPosition', this.markers[0].position)
    }
  }

}
</script>

<style lang="scss" scoped>
    .amap-demo {
      height: 450px;
    }
    .search-box {
      z-index: 999;
      margin-bottom: 20px;
    }
    .amap-page-container {
      position: relative;
    }
</style>

父組件直接引入此組件：

  <Position v-if="positionShow" :maker-position.sync="position" :dialog-visible.sync="positionShow" />

至此地圖選點(diǎn)就實(shí)現(xiàn)了惑芭，之后更新地圖顯示坐標(biāo)及信息窗口的文章。