vue-baidu-map使用

安装
npm install vue-baidu-map —save
父页面

import MAP from "/components/baidumap";

components: {
    MAP,
  },

<el-input
         v-model="ruleForm.address"
         id="suggestId2"
         name="emergency_one_address"
         placeholder="请选择地址"
         class="input_style"
></el-input>
 <MAP
         :onlyRead="true"
        @point="point2"
        :keyword="ruleForm.address"
        :adresswd="userlocation2"
        :glid="'suggestId2'"
        :id="'mapId2'"
 ></MAP>

参数说明
onlyRead     地图只读（true为只读，默认为false）
keyword      绑定输入地址框的内容
adresswd     回显经纬度的传值  格式{lng: 0,lat: 0,}
glid         关联输入地址框的id,默认是suggestId（多个地图时使用）
id             地图绑定的id（多个地图时使用）
point        接受子组件传来的值

point(value) {
      this.ruleForm.address = value.address;
      this.userlocation = value.position;
    },

组件内容

<template>
  <div>
    <baidu-map
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @ready="handler"
      @click="clickpoint"
      class="bm-view"
      :id="id"
      v-if="con.position.lng"
    >
      <!-- 在右上角加入比例尺控件 -->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!-- 在左上角加入缩放控件 -->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <bm-marker :position="con.position" :dragging="false"> </bm-marker>
    </baidu-map>
    <span class="lngLat gray">经纬度：</span>
    <span>({{ con.position.lng }}&nbsp;,&nbsp;{{ con.position.lat }})</span>
  </div>
</template>

<script>
export default {
  props: {
    keyword: {
      type: String,
      default: "",
    },
    adresswd: {
      type: Object,
      default: { lng: 0, lat: 0 },
    },
    glid: {
      type: String,
      default: "suggestId",
    },
    id: {
      type: String,
      default: "mapId",
    },
    onlyRead: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      BMap: null,
      map: null,
      center: { lng: 112.594404, lat: 37.780812 },
      zoom: 15,
      con: {
        position: { lng: 112.594404, lat: 37.780812 },
        address: "",
      },
    };
  },
  watch: {
    keyword(newval, oldval) {
      if (oldval && !this.onlyRead) {
        let posibox = document.querySelector(".tangram-suggestion-main");
        posibox.style.opacity = 1;
        posibox.style.zIndex = 10;
      }
    },
  },
  destroyed() {
    if (!this.onlyRead) {
      let posibox = document.querySelector(".tangram-suggestion-main");
      posibox.setAttribute("class", "");
    }
  },
  mounted() {
    this.con.position = this.adresswd;
  },
  methods: {
    // 添加标注
    makerCenter(point) {
      var point = point;
      this.map.clearOverlays();
      this.map.addOverlay(new this.BMap.Marker(point));
      this.con.position.lng = point.lng;
      this.con.position.lat = point.lat;
      this.$emit("point", this.con);
      this.zoom = 15;
    },
    // 点击地图
    clickpoint(e) {
      if (!this.onlyRead) {
        let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
        geocoder.getLocation(e.point, (rs) => {
          this.con.address = rs.address;
          this.$emit("point", this.con);
        });

        this.makerCenter(e.point);
      }
    },
    // 初始化地图完成
    handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      if (this.adresswd.lng) {
        this.center.lng = this.con.position.lng * 1;
        this.center.lat = 37.860649;
        console.log(this.center);
        this.map.clearOverlays();
        this.map.addOverlay(new this.BMap.Marker(this.center));
      }
      if (!this.onlyRead) {
        var glid = this.glid;
        var ac = new this.BMap.Autocomplete({
          input: glid,
          location: map,
        });

        ac.addEventListener("onconfirm", (e) => {
          this.listdj(e);
        });
        setTimeout(() => {
          let posibox = document.querySelector(".tangram-suggestion-main");
          let bodybox = document.querySelector(".container-fluid");
          bodybox.appendChild(posibox);
          posibox.style.opacity = 0;
          posibox.style.zIndex = -1;
        }, 500);
      }
    },
    // 搜索列表点击
    listdj(e) {
      var _value = e.item.value;
      this.con.address =
        _value.province +
        _value.city +
        _value.district +
        _value.street +
        _value.business;
      this.setPlace();
    },
    setPlace() {
      var map = this.map;
      var th = this;
      map.clearOverlays(); //清除地图上所有覆盖物
      function myFun() {
        var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 18);
        map.addOverlay(new BMap.Marker(pp)); //添加标注
        th.con.position.lng = pp.lng;
        th.con.position.lat = pp.lat;
        th.$emit("point", th.con);
      }
      var local = new BMap.LocalSearch(map, {
        //智能搜索
        onSearchComplete: myFun,
      });
      local.search(this.con.address);
    },
  },
};
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
.map {
  width: 100%;
  height: 300px;
}
.lngLat {
  margin-left: 20px;
}
.searchlist {
  z-index: 118;
  position: absolute;
  top: -36px;
  width: 100%;
  display: none;
}
</style>