百度地圖自定義元件

<template>
  <div v-show="visible" class="map">
    <div id="map-core"></div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "theMap",

  data() {
    return {
      visible: true,
      location: {
        lng: "",
        lat: "",
        address: "贛州市崇義縣崇義汽車站",
      },
      map: {},
      ac: {},
    };
  },
  props: {
    // loadMap: { type: Boolean, default: false },
    lnglat: { type: Object, default: () => {} },
  },
  methods: {
    loadData() { 
      // debugger;
      this.location.lng = this.lnglat.longitude;
      this.location.lat = this.lnglat.latitude;
      this.location.address = this.lnglat.resourceAddress;
      this.map.centerAndZoom(new BMap.Point( this.location.lng, this.location.lat), 18);
      console.log(this.location);
    },
    // 初始化地圖
    setMap() {
      this.map = new BMap.Map("map-core");
      this.map.centerAndZoom(new BMap.Point(114.314981, 25.687931), 18);
      /**新增控制元件 */
      // 新增帶有定位的導航控制元件
      var navigationControl = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT, // 靠左上角位置
        type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE型別
        enableGeolocation: true, // 啟用顯示定位
      });

      // 新增定位控制元件
      var geolocationControl = new BMap.GeolocationControl();
      geolocationControl.addEventListener("locationSuccess", function (e) {
        // debugger;
        // 定位成功事件
        var address = "";
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        alert("當前定位地址為：" + address);
      });
      geolocationControl.addEventListener("locationError", function (e) {
        // 定位失敗事件
        alert(e.message);
      });
      this.map.addControl(geolocationControl);
      this.map.addControl(navigationControl);
      const _this = this;
      this.map.enableScrollWheelZoom(true);
      /**  控制元件結束*/
      var geoc = new BMap.Geocoder();
      /**點選地圖，獲取經緯度及具體位置 */
      this.map.addEventListener("click", function (e) {
        _this.location.lng = parseFloat(e.point.lng);
        _this.location.lat = parseFloat(e.point.lat);
        console.log(_this.location.lng, _this.location.lat);
        var pt = e.point;
        // 具體位置
        geoc.getLocation(pt, function (rs) {
          //addressComponents物件可以獲取到詳細的地址資訊
          var addComp = rs.addressComponents;
          var site =
            addComp.province +
            " " +
            addComp.city +
            " " +
            addComp.district +
            " " +
            addComp.street +
            " " +
            addComp.streetNumber;
          _this.location.address = site;
          //   console.log(addComp);
          //   console.log(_this.location.address);

          _this.$emit("getLocation", _this.location);
        });
      });
      //   判斷是否有經緯度，有的話，直接根據經緯度定位
      this.drawLocation();
    },
    // 根據經緯度繪製地圖中的座標點
    drawLocation() {
      if (this.location.lng !== "" && this.location.lat !== "") {
        this.map.clearOverlays();
        const new_point = new BMap.Point(this.location.lng, this.location.lat);
        const marker = new BMap.Marker(new_point);
        this.map.addOverlay(marker);
        this.map.panTo(new_point);
      }
    },
    // 搜尋位置功能實現
    setSearch() {
      const _this = this;
      //建立一個自動完成的物件
      this.ac = new BMap.Autocomplete({
        input: "suggestId",
        location: _this.map,
      });
      //滑鼠放在下拉選單上的事件
      this.ac.addEventListener("onhighlight", function (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;
        }
        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
      });
      let myValue;
      //滑鼠點選下拉選單後的事件
      this.ac.addEventListener("onconfirm", function (e) {
        let _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        _this.setPlace(myValue);
      });
    },
    setPlace(myValue) {
      const _this = this;
      //清除地圖上所有覆蓋物
      this.map.clearOverlays();
      //智慧搜尋
      this.local = new BMap.LocalSearch(_this.map, {
        onSearchComplete: _this.onSearchComplete,
      });
      this.local.search(myValue);
    },
    onSearchComplete() {
      //獲取第一個智慧搜尋的結果
      let pp = this.local.getResults().getPoi(0).point;
      this.location.address = this.local.getResults().keyword;
      this.location.lng = parseFloat(pp.lng);
      this.location.lat = parseFloat(pp.lat);
      this.map.centerAndZoom(pp, 18);
      //新增標註
      this.map.addOverlay(new BMap.Marker(pp));
    },
    // 向父元件傳遞經緯度
    selectLocation() {
      //   console.log(this.location);
      this.$emit("selectLocation", this.location);
    },
  },
   mounted () {
 this.setMap();
      this.setSearch();
  },
  watch: {
    location: {
      handler() {
        this.drawLocation(); 
        // debugger;
        this.$emit("getLocation", this.location);
      },
      deep: true,
    },
    visible() {
      console.log("ddd");
    },
  },
};
</script>

<style lang="less" scoped>
.map {
    width: 1000px;
  height: 450px;
  font-size: 14px;
  position: relative;
  #map-core {
    // width: 996px;
    height: 100%;
    margin: 0;
  }
  .search {
    display: flex;
    margin-top: 10px;
    height: 40px;
    align-items: center;
    justify-content: center;
    #r-result {
      display: flex;
      align-items: center;
      height: 40px;
      background-color: rgb(255, 255, 255);
      p {
        height: 20px;
        padding-right: 10px;
      }
      input {
        width: 220px;
        height: 20px;
      }
    }
    .lng-lat {
      display: flex;
      .item {
        display: flex;
        align-items: center;
        padding-left: 10px;
        // height: 20px;
        // line-height: 20px;
        p {
          // height: 20px;
          padding-right: 10px;
        }
        input {
          width: 100px;
          height: 20px;
        }
        button {
          color: #fff;
          height: 28px;
          width: 60px;
          background: #40b0ff;
          border: 1px solid #40b0ff;
          border-radius: 2px;
          &:hover {
            background: #10b0ff;
            border: 1px solid #10b0ff;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>

<style>
.tangram-suggestion {
  z-index: 99999999999999999999999999999;
}
</style>

使用定義元件

<template>
 <theMap
         @getLocation="getLocation"
         ref="mapInit"
         :lnglat="ruleForm"
  ></theMap>
</template>
<script>
export default{
    data(){
        return {
          ruleForm: {
            scenicName: "",
            imagesPath: "",
            scenicAddress: "",
            latitude: 25.687785,
            longitude: 114.314784,
          },
        }
    },
    methods:{
       getLocation(location) {
          // 賦值經度緯度和地址
          if (location) {
            this.ruleForm.longitude = location.lng;
            this.ruleForm.latitude = location.lat;
            this.ruleForm.scenicAddress = location.address;
          }
        },
    }
}
</script>

原文地址：https://marco-hui.github.io/vue-admin-web/?#/home