vue 和谷歌地图信息窗口

Question

我正在使用 vue 和谷歌地图，我希望通过更新信息窗口中显示的数据来获得实时体验。我试过以下：

var infoStr =   
'<table class="">'+                                    
   '<tbody>' +
       '<tr>' +
          '<td colspan="2">{{testInfo}}</td>' +
       '</tr>' +                                        
    '</tbody>'+
'</table >';

var infowindow = new google.maps.InfoWindow({
   content: infoStr
});

global.infoWindow = infowindow;
infowindow.open(map, marker);

应用程序显示 {{testInfo}} 就像它是一个字符串并且未绑定。无论如何要在 InfoWindow 中绑定数据，以便我可以将其绑定到 Vue 数据？

Answer 1

您的问题是，当您将{{testInfo}} 放入变量infoStr 时，您将其设为静态，因此在创建信息窗口时它的值仅为{{testinfo}}。

作为一种解决方法，我建议您将id="info-win-1" 属性添加到您的信息窗口代码中。

var infoStr =   
   '<table class="">'+                                    
     '<tbody>' +
     '<tr>' +
       '<td id="info-win-1" colspan="2">{{testInfo}}</td>' +
     '</tr>' +                                        
     '</tbody>'+
   '</table >';

var infowindow = new google.maps.InfoWindow({ 内容：infoStr });

这样您就可以在您的 vue 应用中使用 document.getElementById("info-win-1").innerHTML = testInfo 动态更改内容。