dx-element-ui/packages/map/src/main.vue

<template>
  <div>
    <baidu-map v-bind:style="mapStyle" class="bm-view" :ak="akey"
               :center="center"
               :zoom="zoom"
               :scroll-wheel-zoom="true"
               @click="getClickInfo"
               @moving="syncCenterAndZoom"
               @moveend="syncCenterAndZoom"
               @zoomend="syncCenterAndZoom">
      <bm-view style="width: 100%; height:100%;"></bm-view>
      <bm-marker v-if="positionUrl" :position="{lng: center.lng, lat: center.lat}" :dragging="true"
                 animation="BMAP_ANIMATION_BOUNCE" :icon="{ url: positionUrl, size: { width: 54, height: 54 }}"></bm-marker>
      <bm-marker v-else :position="{lng: center.lng, lat: center.lat}" :dragging="true"
                 animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-control :offset="{width: '10px', height: '10px'}">
        <bm-auto-complete v-model="address" :sugStyle="{zIndex: 999999}">
          <input type="text" v-model="address" placeholder="请输入搜索关键字" class="serachinput">
        </bm-auto-complete>
      </bm-control>
      <bm-local-search :keyword="address" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
    </baidu-map>
    <div class="footer">
      <div class="nt-info nt-btn-bottom" @click.stop="mapCancel">取消</div>
      <div class="nt-primary nt-btn-bottom" @click.prevent.stop="mapConfirm">确定</div>
    </div>
  </div>
</template>
<script>
import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from 'vue-baidu-map'

export default {
  name: 'NtMap',
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker
  },
  data: function () {
    return {
      address: this.addressKey,
      mapStyle: {
        width: '100%',
        overflow: 'hidden',
        minHeight: '280px',
        height: this.mapHeight
      },
      center: {lng: 116.404, lat: 39.915},
      zoom: 15
    }
  },
  watch: {},
  props: {
    akey: {
      type: String,
      default: 'dfhycORtYDMz78dNLo9oNiDO1ufI2TZS'
    },
    addressKey: {
      type: String,
      default: ''
    },
    pointValue: {
      type: String,
      default: ''
    },
    inputItem: {
      type: Object
    },
    mapHeight: {
      type: String,
      default: '280px'
    },
    positionUrl: {
      type: String
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      if (this.pointValue) {
        const points = this.pointValue.split(((this.inputItem && this.inputItem.sign) || ','));

        this.address = '';
        this.center = {
          lng: points[0] || 116.404,
          lat: points[1] || 39.915
        }
      }
    },
    /***
     * 地图点击事件。
     */
    getClickInfo(e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    syncCenterAndZoom(e) {
      const {lng, lat} = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    /***确认*/
    mapConfirm: function () {
      this.$emit('mapConfirm', this.center)
    },
    /***取消*/
    mapCancel: function () {
      this.$emit('mapCancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.serachinput {
  width: 200px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 12px;
  font-size: 12px;
  height: 30px;
  color: #333;
  outline-width: 0;
  outline-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
}

.footer {
  padding-top: 10px;
  text-align: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .nt-btn-bottom {
    width: 60px;
    height: 28px;
    line-height: 25px;
    margin-left: 10px;
    cursor: pointer;

    &.nt-info {
      border: 1px solid #e2e2e2;
      background-color: #f8f8f8;

      &:hover {
        background-color: rgba(248, 248, 248, .5)
      }
    }

    &.nt-primary {
      color: #ffffff;
      border: 1px solid #409EFF;
      background-color: #409EFF;

      &:hover {
        background-color: rgba(64, 158, 255, .85)
      }
    }
  }
}
</style>