将 VueJS 组件渲染到 Google Map Infowindow 中

Question

我正在尝试渲染一个简单的 vue js 组件 -

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

通过将其传递到标记的信息窗口

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

vueJS 组件是 -

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

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

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

Answer 1

今天重温这个之后，我能够通过编程创建 vue 组件的实例并在简单地将其呈现的 HTML 模板作为信息窗口的内容传递之前安装它。

InfoWindow.vue

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

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

在打开信息窗口之前需要创建的代码部分：

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

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 中，带有“双胡须”的模板插值将其内容解释为纯文本，而不是 HTML（因此对其进行转义）。如果你想发出 HTML，你需要使用 v-html 指令：

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

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

请注意，这种方式不考虑数据绑定，因此我不确定操作原始 HTML 是否是这里的最佳策略。