百度地图坐标标点组件封装，带搜索

<template>
  <div class="center">
    <div class="baidu-map" id="baidu_Map" ref="baiduMapRef"></div>
    <div ref="r_result" class="r-result">
      搜索地址 ：
      <input
        type="text"
        id="suggestId"
        class="suggestId"
        placeholder="请输入"
      />
    </div>
    <div
      id="searchResultPanel"
      style="
        border: 1px solid #c0c0c0;
        width: 150px;
        height: auto;
        display: none;
      "
    ></div>
  </div>
</template>
<script>
import { BaiduMap } from "@/libs/map.js";
export default {
  name: "",
  components: {},
  props: {
    showEdit: {
      type: Boolean,
      default: false,
    },
    toLatLng: {
      type: Object,
      default: "",
    },
  },
  data() {
    return {
      map: null,
      zoom: 16,
      marker: null,
      info: {
        centerLng: "",
        centerLat: "",
      },
    };
  },
  mounted() {
    setTimeout(() => {
      this.initMap();
      console.log(this.toLatLng, 333);
    }, 1000);
  },
  created() {},
  methods: {
    initMap() {
      let _this = this;
      BaiduMap.init().then((BMap) => {
        _this.map = new BMap.Map("baidu_Map");
        _this.map.centerAndZoom(
          new BMap.Point(_this.toLatLng.centerLng, _this.toLatLng.centerLat),
          _this.toLatLng.mapLevel
        );
        _this.map.addControl(
          new BMap.MapTypeControl({
            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], //图层类型
            anchor: BMAP_ANCHOR_TOP_LEFT, //切换按钮位置
          })
        );
        _this.map.enableScrollWheelZoom();
        //有坐标标点
        if (_this.toLatLng.centerLat && _this.toLatLng.centerLng) {
          _this.info.centerLng = _this.toLatLng.centerLng;
          _this.info.centerLat = _this.toLatLng.centerLat;
          _this.setInitMarker();
        }
        if (this.showEdit) {
          _this.map.addEventListener("click", _this.MapClick);
          //显示搜索功能
          this.$refs.r_result.style.visibility = "visible";
        }
        //以下是搜索功能
        //建立一个自动完成的对象
        let ac = new BMap.Autocomplete({
          input: "suggestId",
          location: _this.map,
        });
        //鼠标放在下拉列表上的事件
        ac.addEventListener("onhighlight", (e) => {
          let str = "";
          let _value = e.fromitem.value;
          let 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;
          this.GOing("searchResultPanel").innerHTML = str;
        });
        //鼠标点击下拉列表后的事件
        ac.addEventListener("onconfirm", (e) => {
          let _value = e.item.value;
          this.myValue =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
          this.GOing("searchResultPanel").innerHTML =
            "onconfirm<br />index = " +
            e.item.index +
            "<br />this.myValue = " +
            this.myValue;
          this.setPlace();
        });
      });
      //传出去
      // _this.$emit("getLngLat", _this.info);
    },
    //获取id的值
    GOing(id) {
      return document.getElementById(id);
    },
    //搜索设置位置
    setPlace() {
      let _this = this;
      _this.map.clearOverlays(); //清除地图上所有覆盖物
      // let that = this;
      function myFun() {
        //获取第一个智能搜索的结果
        let pp = local.getResults().getPoi(0).point;
        _this.map.centerAndZoom(pp, _this.toLatLng.mapLevel);
        //添加标注
        _this.map.addOverlay(new BMap.Marker(pp));
        _this.info.centerLng = pp.lng;
        _this.info.centerLat = pp.lat;
        //传出去
        _this.$emit("getLngLat", _this.info);
      }
      //智能搜索
      let local = new BMap.LocalSearch(this.map, {
        onSearchComplete: myFun,
      });
      local.search(this.myValue);
    },
    //地图设置标点
    setInitMarker() {
      let _this = this;
      _this.marker = new window.BMap.Marker(
        new window.BMap.Point(_this.info.centerLng, _this.info.centerLat)
      );
      _this.map.addOverlay(_this.marker);
    },
    //地图点击事件
    MapClick(e) {
      let _this = this;
      if (_this.marker) {
        _this.map.clearOverlays();
      }
      const myGeo = new BMap.Geocoder();
      myGeo.getLocation(e.point, (rs) => {
        _this.info.addr = rs.address;
      });
      _this.info.centerLng = e.point.lng;
      _this.info.centerLat = e.point.lat;

      let new_point = new window.BMap.Point(
        _this.info.centerLng,
        _this.info.centerLat
      );
      _this.map.panTo(new_point);
      _this.marker = new window.BMap.Marker(new_point);
      _this.map.addOverlay(_this.marker);
      //传出去
      _this.$emit("getLngLat", _this.info);
    },
  },
};
</script>

<style lang="less" scoped>
.center {
  width: 100%;
  // height: 40.5vh;
  height: 100%;
  position: relative;

  .baidu-map {
    width: 100%;
    height: 600px;
  }
  .r-result {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
    color: #000;
    font-size: 16px;
    z-index: 999999;
    visibility: hidden;
    .suggestId {
      border: 1px solid #73859f;
      outline: none;
      width: 220px;
      height: 30px;
      border-radius: 4px;
      padding-left: 5px;
      z-index: 999999;
    }
    .tangram-suggestion-main {
      z-index: 9999 !important;
    }
  }
}
</style>

调用

<baiduMap
            @getLngLat="getLngLat"
            :showEdit="false"
            :toLatLng="info"
          ></baiduMap>