vue点击地图位置获取金纬度以及获取省市区

点击地图获取金纬度跟地址详情。同时解决地图标记一直不在中央，在左上角的问题。

先上效果图：

第一步引入百度地图：

在目录public -> index.html中引用该地址

 <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=自己百度地图申请"></script>

第二代码：

<!--获取经纬度-->
<template>
  <div>
    <div class="content-box">
      <span style="margin-right: 20px;">{{sendO.lng}} , {{sendO.lat}}</span>
      <el-input v-model="searchVal" placeholder="请输入内容" maxlength="20" style="width: 220px;"></el-input>
      <el-button @click="searchFun">搜索</el-button>
      <div class="search-list" v-if="isOpen">
        <div class="select-item" v-for="item in resutSearchList" @click="handlerSelect(item)">{{item.address}}</div>
      </div>
    </div>
    <div id="mapApp" v-if="isOpenMap">
    </div>
  </div>
</template>

<script>
  export default {
    name: "showMap",
    data() {
      return {
        isOpen: false,
        sendO: {
          lng: this.lng,
          lat: this.lat,
          info: {}
        },
        map: null,
        local: null,
        searchVal: null,
        resutSearchList: [],
        myGeo: new BMap.Geocoder(),
      }
    },
    mounted() {
      this.initMap2();
    },
    updated() {
      this.initMap2();
    },
    methods: {
      addEvent() {
        this.map.addEventListener("click", (r) => {
          this.sendO.lng = r.point.lng;
          this.sendO.lat = r.point.lat;
          this.reverse();
          this.addMarker(this.map);
        })
      },
      initMap2() {
        if(!this.isOpenMap)return;
        this.map = new BMap.Map("mapApp");
        this.addEvent();
        if (!this.sendO.lat) {
          this.sendO.lat = 39.915573;
        }
        if (!this.sendO.lng) {
          this.sendO.lng = 116.401314;
        }

        this.map.enableScrollWheelZoom(true);
        this.addMarker(this.map);

        this.local = new BMap.LocalSearch(this.map, { //智能搜索
          onSearchComplete: this.search
        });
        //ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
        // var str = "";
        // var _value = e.fromitem.value;
        // var value = "";
        // if (e.fromitem.index > -1) {
        //   value = _value.province + _value.city + _value.district + _value.street + _value.business;
        // }
        // str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        // value = "";
        // if (e.toitem.index > -1) {
        //   _value = e.toitem.value;
        //   value = _value.province + _value.city + _value.district + _value.street + _value.business;
        // }
        // str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        //console.log(str)
        //G("searchResultPanel").innerHTML = str;
        //});

        //var myValue;
        //ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
        // var _value = e.item.value;
        // myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        //console.log(myValue)
        //G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        //setPlace();
        //});

      },

      reverse() {
        let then = this;
        // 创建地理编码实例
        // var myGeo = new BMap.Geocoder();
        // 根据坐标得到地址描述
        this.myGeo.getLocation(new BMap.Point(this.sendO.lng, this.sendO.lat), function(result) {
          if (result) {
            then.sendO.info = result;
          }
          then.sendData();
        })
      },

      addMarker(map) {
        map.clearOverlays();
        map.centerAndZoom(new BMap.Point(this.sendO.lng, this.sendO.lat), 12);
        let marker1 = new BMap.Marker(new BMap.Point(this.sendO.lng, this.sendO.lat));
        map.addOverlay(marker1);
      },
      search() {
        let slist = this.local.getResults();
        console.log(slist);
        if (slist.length <= 0) {
          this.$message('没找到信息');
          return;
        }
        this.isOpen = true;
        this.resutSearchList = this.local.getResults().Yr;
        // var pp = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
      },
      searchFun(v) {
        this.map.clearOverlays(); //清除地图上所有覆盖物
        this.local.search(this.searchVal);
      },
      handlerSelect(v) {
        this.isOpen = false;
        this.map.clearOverlays(); //清除地图上所有覆盖物
        this.sendO.lng = v.point.lng;
        this.sendO.lat = v.point.lat;
        this.addMarker(this.map);
        this.reverse();
      },
      sendData() {
        this.$emit("getMapInfo", this.sendO);
      },
    },
    created() {},
    watch: {
      lat(n, o) {
        this.sendO.lat = n;
      },
      lng(n, o) {
        this.sendO.lng = n;
      }
    },
    props: {
      lng: {
        type: [Number],
        default: null
      },
      lat: {
        type: [Number],
        default: null
      },
      isOpenMap: {
        type: [Boolean],
        default: false
      }
    }
  }
</script>

<style scoped lang="scss">
  #mapApp {
    overflow: hidden;
    width: 760px;
    height: 400px;
    margin: 0;
    font-family: "微软雅黑";
  }

  .content-box {
    width: 800px;
    position: relative;

    .search-list {
      position: absolute;
      border: 1px solid #ccc;
      z-index: 88888;
      background-color: #fff;
      min-width: 200px;
      border-radius: 5px;
      margin-left: 170px;
    }

    .select-item:hover {
      background-color: #ccc;
      cursor: pointer;
    }
  }
</style>

第三引入模块：

 <el-dialog title="获取位置" :visible.sync="openMap" width="800px" append-to-body>
      <showMap @getMapInfo="mapInfo" :lng="Number(form.longitude)" :lat="Number(form.latitude)" :isOpenMap="openMap" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="affirmMap">确 定</el-button>
        <el-button @click="cancelMap">取 消</el-button>
      </div>
    </el-dialog>

export defualt{
    data(){
         openMap: false,
    },
    methods:{
 handlerOpenMap(id) {
        if(id){
          getAddress(id).then(response => {
            this.form = response.data;
          });
        }else{
           this.reset();
        }

        this.openMap = true;
      },
  mapInfo(v) {
        this.mapInfos = v;
      },
}

}