Vue组件地图选点插件的代码示例

以下是一个基于Vue.js的组件地图选点插件的示例代码：

<template>
  <div class="map-picker">
    <div id="map"></div>
    <div class="map-picker-footer">
      <button @click="cancel">取消</button>
      <button @click="confirm">确定</button>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import BMapLoader from 'bmap-loader';

  export default {
    name: 'MapPicker',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      address: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        map: null,
        marker: null,
        point: null
      }
    },
    computed: {
      ...mapState(['bmapKey'])
    },
    watch: {
      value(val) {
        if (val) {
          this.initMap();
        } else {
          this.closeMap();
        }
      }
    },
    methods: {
      initMap() {
        const self = this;
        BMapLoader.load({
          ak: this.bmapKey
        }).then(BMap => {
          self.map = new BMap.Map('map');
          self.map.enableScrollWheelZoom(true);
          self.map.addControl(new BMap.NavigationControl());
          self.map.addControl(new BMap.ScaleControl());
          self.map.addControl(new BMap.OverviewMapControl());

          if (self.address) {
            self.searchAddress(self.address);
          } else {
            self.getUserLocation();
          }

          self.map.addEventListener('click', function(e) {
            self.addMarker(e.point);
          });
        });
      },
      getUserLocation() {
        const self = this;
        const geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r) {
          if (this.getStatus() === BMAP_STATUS_SUCCESS) {
            self.map.centerAndZoom(r.point, 16);
            self.addMarker(r.point);
          } else {
            self.searchAddress('北京市');
          }
        });
      },
      searchAddress(address) {
        const self = this;
        const local = new BMap.LocalSearch(self.map, {
          onSearchComplete() {
            if (local.getStatus() === BMAP_STATUS_SUCCESS) {
              self.map.centerAndZoom(local.getResults().getPoi(0).point, 16);
              self.addMarker(local.getResults().getPoi(0).point);
            }
          }
        });
        local.search(address);
      },
      addMarker(point) {
        const self = this;
        if (self.marker) {
          self.map.removeOverlay(self.marker);
        }
        self.point = point;
        self.marker = new BMap.Marker(point);
        self.map.addOverlay(self.marker);
      },
      confirm() {
        this.$emit('update:value', false);
        this.$emit('select', {
          address: this.getAddress(),
          point: this.point
        });
      },
      cancel() {
        this.$emit('update:value', false);
      },
      getAddress() {
        const self = this;
        return new Promise((resolve) => {
          const geoc = new BMap.Geocoder();
          geoc.getLocation(self.point, function(rs) {
            const addComp = rs.addressComponents;
            resolve(`${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`);
          });
        });
      },
      closeMap() {
        if (this.map) {
          this.map.remove();
          this.map = null;
        }
      }
    }
  }
</script>

<style>
  .map-picker {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #fff;
  }

  #map {
    height: 100%;
  }

  .map-picker-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
  }

  .map-picker-footer button {
    margin: 0 10px;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
  }
</style>

这个组件基于百度地图API，可以根据传入的地址或者用户的当前位置，在地图上选取一个点，最后返回选取点的地址和经纬度坐标。