zoukankan      html  css  js  c++  java
  • 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 = {
                             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; // 打开信息窗口
                    });
                });
    

    效果展示

  • 相关阅读:
    URAL 2046 A
    URAL 2056 Scholarship 水题
    Codeforces Gym 100286I iSharp 水题
    Codeforces Gym H. Hell on the Markets 贪心
    Codeforces Gym 100286G Giant Screen 水题
    Codeforces Gym 100286B Blind Walk DFS
    Codeforces Gym 100286F Problem F. Fibonacci System 数位DP
    Codeforces Gym 100286A. Aerodynamics 计算几何 求二维凸包面积
    Codeforces Gym 100418K Cards 暴力打表
    Codeforces Gym 100418J Lucky tickets 数位DP
  • 原文地址:https://www.cnblogs.com/tcz1018/p/13749832.html
Copyright © 2011-2022 走看看