vue3天地图点位信息窗口内容自定义

点击坐标,弹出信息窗体内容用的是用js拼接html字符串

发现这样太不方便,对信息窗体内元素做操作很麻烦,而且内容只能用原生html拼接,我这里想在窗体里介入element元素和echarts图表怎么办

 在vue2的时候有extend可以在点击地图坐标的时候手动挂载组件作为信息,Vue组件实现百度地图弹窗,Vue组件插入节点

vue3中extend被废除,Vue3.0中对Vue2.0全局API extend 的替代方案,不会搞o(╥﹏╥)o

然后想了个不太规范的方法,但要的效果已经能满足

  <div id='mapDiv' style='width:100%; height:650px'></div> // 地图容器

    // 自定义弹窗内容 可以使用html,element和echart等自定义
    // 先flag=false隐藏 因为窗口内容是页面初始加载的,会显示在地图外
   <div v-show="flag" ref="boxcontent"> 
      <el-button type="primary" @click="showflag">111</el-button>
      <echart :flag="flag"></echart>
   </div>
 


//  setup里

  const map = ref()

  const maps = () => {
      map.value = new T.Map('mapDiv')
      map.value.centerAndZoom(new T.LngLat(120, 30), 12)
      map.value.enableDoubleClickZoom()

      let point = new T.LngLat(120, 30)
      marker.value = new T.Marker(point);
      map.value.addOverLay(marker.value);
      
      var markerInfoWin = new T.InfoWindow(proxy.$refs.boxcontent,
{maxWidth: 350, minWidth: 350,closeOnClick:true});
 // 通过ref和$refs获取自定义的信息窗体dom,将他移植到天地图信息窗口里

      marker.value.addEventListener("click", () => {
        marker.value.openInfoWindow(markerInfoWin);
        state.flag=true 
      });

    }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值