将Vue文件集成到Maptalks的InfoWindow中

将Vue文件集成到Maptalks的InfoWindow中

引入vue文件

import InfoWindowComponent from '../popup.vue';

 marker.on("click", evt => {
      marker.flash(100, 2, () => {

        currentMarker = marker
        currentMarkerCoor = evt.coordinate

        // 动态创建 Vue 实例
        const ComponentClass = Vue.extend(InfoWindowComponent);
        const vm = new ComponentClass({
          propsData: {
            title: '动态信息窗口',
            mapPopup: true,
          }
        }).$mount();
        // 创建 InfoWindow 并注入 Vue 内容
        const info = {
          content: vm.$el, // 关键：注入 Vue 渲染的 DOM
          width: 430,
          height: 200,
          autoPan: true,
          dx: 0,
          dy: 0
        }

        marker.setInfoWindow(info);
        if (isOutPopup) {
          bus.$emit('changePopupPosition', true)
        } else {
          marker.openInfoWindow(evt.coordinate)
        }
        // 获取信息窗口实例并添加事件监听
        const infoWindow = marker.getInfoWindow();
        infoWindow.on('hide', function () {
          // 这里添加关闭后的处理逻辑
          // 窗口关闭时销毁 Vue 实例
          new ComponentClass().$destroy()
        });
      });
    });