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