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

要被js搞死
  • 27

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);

            })
          }
        })
      }

求大神解答。

回复
阅读 1.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏