vue引入百度地图 实现搜索框 搜索位置 读取经纬度（使用原生）

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; // 打开信息窗口
                });
            });