Vue 封装关键字提示地图组件无效

发布于 2022-09-07 23:17:30 字数 1791 浏览 14 评论 0

Vue-cli项目,需要封装关键字提示地图组件,

clipboard.png

这种效果,然而组件引入后,只有地图显示,输入框搜索没有作用

mounted(){
        this.$nextTick(() => {
          var th = this
          // 创建Map实例
          var map = new BMap.Map("allmap1");
          // 初始化地图,设置中心点坐标,
          // var point = new BMap.Point(121.160724,31.173277); // 创建点坐标,汉得公司的经纬度坐标
          map.centerAndZoom('北京', 15);
          map.enableScrollWheelZoom();
          var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
              "input": "suggestId"
              , "location": map
            })
          console.log(ac)
          var myValue
          ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            this.address_detail = myValue
            setPlace();
          });

          function setPlace() {
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun() {
              th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
              map.centerAndZoom(th.userlocation, 18);
              map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
            }

            var local = new BMap.LocalSearch(map, { //智能搜索
              onSearchComplete: myFun
            });
            local.search(myValue);

            //测试输出坐标(指的是输入框最后确定地点的经纬度)
            map.addEventListener("click",function(e){
              //经度
              console.log(th.userlocation.lng);
              //维度
              console.log(th.userlocation.lat);

            })
          }
        })
      }

求大神解答。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文