前端Vue项目如何是用百度地图实现地图选址功能

CustomMap

<template>
  <div class="custom-map">
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      ak="33B192o1jPaqOHASGGAIkoMuwi8W76j3"
      @ready="handler"
      @click="clickEvent"
    >
      <!-- 地图控件位置 -->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <!-- 城市列表 -->
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
      <!-- 定位当前位置 -->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true" @locationSuccess="getLoctionSuccess" />
      <!-- 地图容器 -->
      <bm-view :style="{width:'100%',height: this.clientHeight - 60 +'px',flex: 1,marginBottom:'-30px'}" />
    </baidu-map>
    <div class="demo-input-suffix">
      <el-link type="info">lng：</el-link><el-input v-model.number="locData.longitude" disabled class="lineinput" style="width:200px" size="mini" />
      <el-link type="info">lat：</el-link><el-input v-model.number="locData.latitude" disabled class="lineinput" style="width:200px" size="mini" />
      <el-link type="info">address：</el-link><el-input v-model="locData.address" disabled class="lineinput" style="width:300px" size="mini" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" size="small" icon="el-icon-close" @click.native="$emit('close-map')">关闭</el-button>
      <el-button v-if="showbtn" type="primary" size="small" icon="el-icon-check" @click.native="findlocation">保存</el-button>
    </div>
  </div>
</template>

<script>
import { BaiduMap, BmNavigation, BmView, BmGeolocation, BmCityList } from 'vue-baidu-map'
export default {
  name: 'MapDialog',
  components: {
    BaiduMap,
    BmNavigation,
    BmView,
    BmGeolocation,
    BmCityList
  },
  props: {
    coordinate: {
      type: String,
      default: ''
    },
    address: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    showbtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      center: {},
      zoom: 12,
      locData: {
        longitude: '',
        latitude: '',
        address: ''
      },
      clientHeight: document.documentElement.clientHeight - 90, // 屏幕高度
      map: null
    }
  },
  watch: {
    'visible': {
      handler(value) {
        if (value) {
          this.locData.address = this.address
          // this.locData.longitude = this.coordinate.split(',')[0]
          // this.locData.latitude = this.coordinate.split(',')[1]
          const center = {
            lng: this.coordinate.split(',')[0],
            lat: this.coordinate.split(',')[1]
          }
          // console.log(value, center)
          // this.map.clearOverlays()
          // const Icon_0 = new BMap.Icon(require('../../assets/icon/position.png'), new BMap.Size(64, 64), { anchor: new BMap.Size(12, 24), imageSize: new BMap.Size(24, 24) })
          // var myMarker = new BMap.Marker(new BMap.Point(center.lng, center.lat), { icon: Icon_0 })
          // this.map.addOverlay(myMarker)
          // // 用所定位的经纬度查找所在地省市街道等信息
          // var point = new BMap.Point(center.lng, center.lat)
          // var gc = new BMap.Geocoder()
          // gc.getLocation(point, (rs) => {
          //   this.locData.address = rs.address
          // })
          this.locData.longitude = center.lng
          this.locData.latitude = center.lat
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    handler({ BMap, map }) {
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition((r) => {
        console.log(this.coordinate,'this.coordinate')
        if (this.coordinate) {
          console.log(this.coordinate)
          const center = {
            lng: this.coordinate.split(',')[0],
            lat: this.coordinate.split(',')[1]
          }
          console.log(center)
          map.clearOverlays()
          const Icon_0 = new BMap.Icon(require('../../assets/images/positionMap.png'), new BMap.Size(64, 64), { anchor: new BMap.Size(12, 24), imageSize: new BMap.Size(24, 24) })
          var myMarker = new BMap.Marker(new BMap.Point(center.lng, center.lat), { icon: Icon_0 })
          this.map.addOverlay(myMarker)
          if (this.address) {
            console.log(this.address)
            this.locData.address = this.address
          } else {
            // 用所定位的经纬度查找所在地省市街道等信息
            console.log(center)
            var point = new BMap.Point(center.lng, center.lat)
            var gc = new BMap.Geocoder()
            gc.getLocation(point, (rs) => {
              this.locData.address = rs.address
            })
          }
          this.locData.longitude = center.lng
          this.locData.latitude = center.lat
          this.center = JSON.parse(JSON.stringify(center))
        } else {
          this.center = { lng: r.longitude, lat: r.latitude }
        }
        // this.autoLocationPoint = { lng: r.longitude, lat: r.latitude }		// 自定义覆盖物
        this.initLocation = true
      }, { enableHighAccuracy: true })
      this.map = map
    },

    // 点击地图监听
    clickEvent(e) {
      console.log(e)
      this.map.clearOverlays()
      const Icon_0 = new BMap.Icon(require('@/assets/images/positionMap.png'), new BMap.Size(64, 64), { anchor: new BMap.Size(12, 24), imageSize: new BMap.Size(24, 24) })
      var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), { icon: Icon_0 })
      this.map.addOverlay(myMarker)
      // 用所定位的经纬度查找所在地省市街道等信息
      var point = new BMap.Point(e.point.lng, e.point.lat)
      var gc = new BMap.Geocoder()
      gc.getLocation(point, (rs) => {
        this.locData.address = rs.address
      })
      this.locData.longitude = e.point.lng
      this.locData.latitude = e.point.lat
    },

    // 定位成功回调
    getLoctionSuccess(point, AddressComponent, marker) {
      console.log(point, AddressComponent, marker)
      this.map.clearOverlays()
      const Icon_0 = new BMap.Icon(require('@/assets/images/positionMap.png'), new BMap.Size(64, 64), { anchor: new BMap.Size(12, 24), imageSize: new BMap.Size(24, 24) })
      var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat), { icon: Icon_0 })
      this.map.addOverlay(myMarker)
      var points = new BMap.Point(point.point.lng, point.point.lat)
      var gc = new BMap.Geocoder()
      gc.getLocation(points, (rs) => {
        this.locData.address = rs.address
      })
      this.locData.longitude = point.point.lng
      this.locData.latitude = point.point.lat
    },
    findlocation() {
      console.log(this.locData,'this.locData');
      console.log(this.locData.length);
      if(this.locData.address=="" && this.locData.longitude==''&& this.locData.latitude==''){
        this.$message.warning('请先点击地图图标')
        return
      }
      this.$emit('findlocdata', this.locData)
      this.$emit('close-map')
    }
  }

}
</script>

<style lang="less">
.custom-map {

  .anchorBL {
    display: none;
  }
  .dialog-footer{
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .demo-input-suffix{
    .el-link{
      padding-left: 20px;
    }
    .el-link--inner{
      color: black;
    }
    .el-input__inner{
      color: black;
    }
  }
}
#mapDialog {
  .el-dialog__body{
    padding: 0;
  }
}
</style>

import MapDialog from “@/components/CustomMap”;

    <el-dialog
      id="mapDialog"
      title="定位设置"
      :visible.sync="mapVisible"
      width="100%"
      top="50px"
      :close-on-click-modal="false"
    >
      <map-dialog
        v-if="mapVisible"
        :visible="mapVisible"
        :coordinate="ruleForm.coordinate"
        :address="ruleForm.enterpriseAddress"
        @findlocdata="getLocdata"
        @close-map="mapVisible = false"
      />
    </el-dialog>
    export default {
       data(){
           mapVisible: false,
           ruleForm:{
           		enterpriseAddress:'',
           		coordinate:''
           }
       },
       methods:{
       	 getLocdata(locData) {
			    console.log(locData,'locData');
			    this.ruleForm.address = locData.address
			    this.ruleForm.coordinate = `${locData.longitude},${locData.latitude}`;
		},
       }
    }