Question

我试图渲染一个简单的 -

的vue js组件

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//a[@class='dropdown-div__button js-dropdown button']//span[@class='u-pad-rs']"))).click();

将其传递到标记的infowindow

var infowindow_content = "<google-map-infowindow ";
infowindow_content += "content='Hello World'";
infowindow_content += "></google-map-infowindow>";

vueJS组件是 -

this.current_infowindow = new google.maps.InfoWindow({
    content: infowindow_content,
});
this.current_infowindow.open(context.mapObject, marker);

但是，这不起作用，窗口是空白的。

Answer 1

今天重新访问之后，我能够通过以编程方式创建vue组件的实例并在将其呈现的HTML模板作为infowindow的内容传递之前进行安装。

<强> InfoWindow.vue

<template>
    <div>
        {{content}}
    </div>
</template>

<script>
module.exports = {
    name: 'infowindow',
    props: [ 
        'content',
    ],
}
</script>

在打开信息窗口之前需要创建的代码部分： ... 从＆＃39; ./ InfoWindow.vue＆＃39;中导入InfoWindowComponent; ...

var InfoWindow = Vue.extend(InfoWindowComponent);
var instance = new InfoWindow({
    propsData: {
        content: "This displays as info-window content!"
    }
});

instance.$mount();

var new_infowindow = new google.maps.InfoWindow({
    content: instance.$el,
});

new_infowindow.open(<map object>, <marker>);

注意：我没有尝试过观察者和事件驱动的电话。

Answer 2

在vue.js模板中，使用“double mustaches”插值将其内容解释为纯文本，而不是HTML（从而转义它）。如果要发出HTML，则需要使用v-html指令：

<div v-html="content"></div>

如需参考，请参阅指南中的Raw HTML和v-html API文档。

请注意，这样就不会考虑数据绑定，所以我不确定在这里操作原始HTML是最好的策略。

将VueJS组件渲染到Google Map Infowindow中

2 个答案: