antd vue 百度地图选点

antd vue 百度地图选点

点击地图选点按钮,弹出页面选择地址,选择完成后,详细地址会自动变更,详细地址可以编辑

BMapComponent.vue

<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
<a-spin :spinning="confirmLoading">
    <div id="allmap" class="mapbox"> 
      <baidu-map
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        style="height:400px"
        @click="getClickInfo"
        @ready="handler"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="false"></bm-marker>
      </baidu-map>
    </div>

</a-spin>
  </a-modal>
</template>

<script>
  export default {
    name: "BMapComponent",

    data () {
      return {
        title:"选择地址",
        visible: false,
        model: {},
        confirmLoading: false,
        headers:{},
        center:{
          lng:114.42818022698,
          lat:30.479137926147
        },
        zoom:15,
        storeLocation:{},
      }
    },

created () {
},
mounted() {
},
    watch:{
/*      center:{
        handler(newPoint,oldPoint){
          this.marker = {lng:newPoint.lng, lat:newPoint.lat};
        },
        deep: true,
        immediate: true
      }*/
    },
methods: {
  show(record) {
    this.visible = true;
    Object.assign(this.model, record);
    this.center.lng = record.lng;
    this.center.lat = record.lat;
    this.zoom = 15;
    this.$nextTick(() => {
      console.log(JSON.stringify(record))
    });

  },
  close () {
    this.$emit('close');
    this.visible = false;
  },

  handleOk() {
    const that = this;

    let point = new BMap.Point(this.center.lng, this.center.lat);
    let coder = new BMap.Geocoder();
    coder.getLocation(point,result => {
      this.storeLocation = {
        lng: point.lng,
        lat: point.lat,
        address: result.address
      }
      console.log("address="+result.address)
      console.log("storeLocation="+JSON.stringify(this.storeLocation));
      this.$emit('getStoreLocation', this.storeLocation);
      this.close();
    });

  },

  handleCancel () {
    this.close()
  },

  //地图
  handler({ BMap, map }) {
    console.log(BMap, map);
    map.centerAndZoom(new BMap.Point(this.model.lng,this.model.lat), 15);
  },
  getClickInfo(e) {
    console.log(e.point.lng)
    console.log(e.point.lat)
    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()
  },

    }
  }
</script>

<style lang="less" scoped>

</style>

父页面 部分代码

    <a-form :form="form">
    <a-form-item
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      label="详细地址">
      <a-input-search placeholder="请输入详细地址" v-decorator="['address', {}]" @search="selectLocation" enterButton="地图选点" />
    </a-form-item>
    </form>

	<b-map-component ref="BMapComponent" @getStoreLocation="updateStoreLocation"></b-map-component>

import BMapComponent from './BMapComponent'

  export default {
    components:{  //用来注册子组件的节点
      "b-map-component": BMapComponent
    },
   
    // methods里面
  selectLocation(){
    let record = {
      lng: this.model.lng,
      lat: this.model.lat
    }
    this.$refs.BMapComponent.show(record)
  },

  updateStoreLocation(record){
    console.log("record="+JSON.stringify(record))
    this.model.lat = record.lat
    this.model.lng = record.lng;
    this.model.address = record.address;
    this.form.setFieldsValue({address:record.address});
  }