vue and google map infowindow

Question

我正在使用VUE和Google Map，我希望通过更新信息窗口中显示的数据来实现实时体验。我尝试关注：

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}}它是一个字符串，没有绑定。无论如何，是否有绑定InfowDindow中的数据，以便我可以将其绑定到VUE数据？

Answer 1

您的问题是，当您将{{testInfo}}放入变量infoStr中时，您正在使其静态，因此，在创建InfowDindow时，它仅具有{{testinfo}}的值。

作为解决方法，我建议您将id="info-win-1"属性添加到Infowdindow代码。

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

var infowdoww = new Google.maps.infowindow({{ 内容：Infostr}(;

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