Vue集成百度地圖實現位置選擇功能

```
ProjectName              // 項目名稱    
├── public               // 公共文件         
│       └── index.html   // html模板
├── src                  // 源代碼
│       └── components   // 全局共用組件
│       		└── BMapAddressSelect  // 百度地圖位置選擇組件
│       └── views        // 頁面文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的秘鑰"></script>

<template>
  <el-dialog title="位置選擇" :visible.sync="openMap" width="900px" append-to-body>
    <el-form label-width="80px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="搜索地址">
            <el-input size="mini" type="text" id="searchAddres" v-model="searchAddresKeywords" placeholder="請輸入地點">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="當前地址">
            <el-input placeholder="請輸入內容" v-model="addressInfo.address">
              <template slot="prepend">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div id="baidu-map-container" style="width: 100%; height: 400px;"></div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmSelect">確 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      searchAddresKeywords: "",
      addressInfo: {
        // 地址信息
        longitude: "", // 經度
        latitude: "", // 緯度
        province: "", // 省
        city: "", // 市
        district: "", // 區
        address: "", // 詳細地址
      },
      openMap: false,
    };
  },
  methods: {
    // 初始化百度地圖
    initBaiduMap() {
      let that = this;
      this.$nextTick(function () {
        /** 初始化地圖Start */
        var map = new BMap.Map("baidu-map-container"); // 創建地圖實例
        var point = new BMap.Point(116.404, 39.915); // 設置中心點坐標
        map.centerAndZoom(point, 13); // 地圖初始化，同時設置地圖展示級別
        map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
        /** 初始化地圖End */

        /** 點擊地圖創建坐標事件Start */
        // 添加地圖點擊事件
        map.addEventListener("click", function (e) {
          var clickpt = e.point; // 點擊的坐標
          map.clearOverlays(); // 移除地圖上的標註
          var marker = new BMap.Marker(clickpt); // 創建標註
          map.addOverlay(marker); // 將標註添加到地圖中
          // 逆地址解析
          that.geocAddress(clickpt);
        });
        /** 點擊地圖創建坐標事件End */

        /** 搜索地址Start */
        // 建立一個自動完成的對象
        var ac = new BMap.Autocomplete({
          input: "searchAddres",
          location: map,
        });
        // 鼠標點擊下拉列表後的事件
        ac.addEventListener("onconfirm", function (e) {
          map.clearOverlays(); // 移除地圖上的標註
          var local = new BMap.LocalSearch(map, {
            //智能搜索
            onSearchComplete: function (results) {
              let poi = results.getPoi(0); //獲取第一個智能搜索的結果
              var searchpt = poi.point; // 獲取坐標
              map.centerAndZoom(searchpt, 16);
              map.addOverlay(new BMap.Marker(searchpt)); //添加標註
              that.geocAddress(searchpt); // 逆地址解析
            },
          });
          // 搜索詞
          var searchValue = e.item.value;
          local.search(
            searchValue.province +
              searchValue.city +
              searchValue.district +
              searchValue.street +
              searchValue.business
          );
        });
        /** 搜索地址End */
      });
    },

    /** 逆向解析地址 point */
    geocAddress(point) {
      let that = this;
      var geoc = new BMap.Geocoder();
      geoc.getLocation(point, function (geocInfo) {
        // 設置基本信息
        var addressInfo = geocInfo.addressComponents;
        that.addressInfo.longitude = point.lng;
        that.addressInfo.latitude = point.lat;
        that.addressInfo.province = addressInfo.province;
        that.addressInfo.city = addressInfo.city;
        that.addressInfo.district = addressInfo.district;
        let address = addressInfo.street + addressInfo.streetNumber;
        if (geocInfo.surroundingPois.length > 0) {
          address = address + geocInfo.surroundingPois[0].title;
        }
        that.addressInfo.address = address;
      });
    },

    /** 打開地圖選擇 */
    show() {
      this.openMap = true;
      this.initBaiduMap();
    },

    /**
     * 確認選擇
     */
    confirmSelect() {
        this.$emit("confirmMapAddress", this.addressInfo);
        this.openMap = false;
    },

    /**
     * 取消選擇
     */
    cancel() {
        this.openMap = false;
    }
  },
};
</script>

<style lang="scss">
// 防止地圖自動完成的對象被遮擋
.tangram-suggestion {
  z-index: 9999;
}
</style>

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-form ref="addressInfo" :model="addressInfo" :rules="rules" label-width="100px">
          <el-form-item label="門店地址" prop="address">
            <el-input placeholder="請選擇門店地址" v-model="addressInfo.address" disabled>
              <template slot="prepend">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}</template>
              <el-button slot="append" icon="el-icon-map" @click="showMap" type="primary">選擇地址</el-button>
            </el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="門店經度" prop="longitude">
                <el-input v-model="addressInfo.longitude" placeholder="請輸入經度" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="門店緯度" prop="latitude">
                <el-input v-model="addressInfo.latitude" placeholder="請輸入緯度" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
	
	<!-- 百度地圖位置選擇 -->
    <BMapAddressSelect ref="bmapAddressSelect" @confirmMapAddress="confirmMapAddress"></BMapAddressSelect>

  </div>
</template>

<script>

import BMapAddressSelect from "@/components/BMapAddressSelect/index";

export default {
  data() {
    return {
      // 位置信息
      addressInfo: {},
      // 表單校驗
      rules: {},
    };
  },
  components: {
    BMapAddressSelect,
  },
  methods: {
    /** 顯示地圖 */
    showMap() {
      this.$refs.bmapAddressSelect.show();
    },

    /** 確認地圖地址 */
    confirmMapAddress(addressInfo) {
      this.addressInfo = addressInfo;
    },
  },
};
</script>