vue引入百度地圖 實現搜索框 搜索位置 讀取經緯度（使用原生）

1.首先是在 template 里面寫百度地圖的容器 就是一個輸入框 邊帶有一個地圖標注位置

<div id="all">
	//這里使用了AntDesign的庫 所以用的 a-input
      <a-input
              type="text"
              id="suggestId"
              name="address_detail"
              placeholder="請輸入地址"
              v-model="address_detail"
              class="input_style"

      />
      //地圖的容器
  		<div id="allmap"></div>
</div>

2.data的數據進行數據保存

data(){
	return{
		 // 地圖相關數據
      address_detail: null, //詳細地址
      userlocation: {lng: "", lat: ""},

      lng: "",
      lat: "",
	}
}

3.在script里面寫 上加載的方法

 // 地圖的相關操作
            this.$nextTick(function () {
                let th = this;
                // 創建Map實例
                // eslint-disable-next-line no-undef
                let map = new BMap.Map("allmap");
                // 初始化地圖,設置中心點坐標，
                // eslint-disable-next-line no-undef
                let point = new BMap.Point(117.155827, 36.695916); // 創建點坐標，漢得公司的經緯度坐標
                map.centerAndZoom(point, 15);
                map.enableScrollWheelZoom();
                // eslint-disable-next-line no-undef
                let ac = new BMap.Autocomplete({
                    //建立一個自動完成的對象
                    input: "suggestId",
                    location: map
                });
                let myValue;
                ac.addEventListener("onconfirm", function (e) {
                    //鼠標點擊下拉列表后的事件
                    let _value = e.item.value;
                    myValue =
                        _value.province +
                        _value.city +
                        _value.district +
                        _value.street +
                        _value.business;
                    th.address_detail = myValue;
                    setPlace();
                });

                function setPlace() {
                    map.clearOverlays(); //清除地圖上所有覆蓋物
                    function myFun() {
                        th.userlocation = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果
                        map.centerAndZoom(th.userlocation, 18);
                        // eslint-disable-next-line no-undef
                        map.addOverlay(new BMap.Marker(th.userlocation)); //添加標注
                        th.lng = th.userlocation.lng;
                        th.lat = th.userlocation.lat;
                    }


                    // eslint-disable-next-line no-undef
                    let local = new BMap.LocalSearch(map, {
                        //智能搜索
                        onSearchComplete: myFun
                    });
                    local.search(myValue);
                    //測試輸出坐標（指的是輸入框最后確定地點的經緯度）
                    map.addEventListener("click", function () {
                        //經度
                        // console.log(th.userlocation);
                        // this.lng = th.userlocation.lng
                        //維度
                        // console.log(th.lat);
                        // this.lat = th.userlocation.lat
                    });
                }

                map.addEventListener("click", function (e) {
                    map.clearOverlays(); //清除地圖上所有覆蓋物
                    // eslint-disable-next-line no-undef
                    map.addOverlay(new BMap.Marker(e.point)); //添加標注
                    var opts = {
                        width: 180, // 信息窗口寬度
                        height: 60 // 信息窗口高度
                    };
                    // eslint-disable-next-line no-undef
                    var infoWindow = new BMap.InfoWindow("項目位置", opts); // 創建信息窗口對象
                    map.openInfoWindow(infoWindow, e.point);
                    th.lng = e.point.lng;
                    th.lat = e.point.lat; // 打開信息窗口
                });
            });