将VueJS组件渲染到Google Map Infowindow中 [英] Rendering VueJS components into a Google Map Infowindow
问题描述
我正在尝试渲染一个简单的vue js组件-
I'm trying to render a vue js component which is simply -
var infowindow_content = "<google-map-infowindow ";
infowindow_content += "content='Hello World'";
infowindow_content += "></google-map-infowindow>";
通过将其传递到标记的信息窗口
by passing it into the marker's 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>
但是,这不起作用,并且窗口是空白的.
However, this doesn't work and the window is blank.
推荐答案
今天重新讨论之后,我可以通过以编程方式创建vue组件实例并将其挂载,然后简单地将其呈现的HTML模板作为信息窗口的内容传递来实现此目的.
After revisiting this today I was able to do this by programmatically creating an instance of the vue component and mounting it before simply passing its rendered HTML template as the infowindow's content.
InfoWindow.vue
<template>
<div>
{{content}}
</div>
</template>
<script>
module.exports = {
name: 'infowindow',
props: [
'content',
],
}
</script>
在打开信息窗口之前需要创建的代码部分:
And in the portion of the code that is required to create before opening the info-window:
...
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>);
注意:我还没有尝试过观察者和事件驱动的调用.
Note: I haven't experimented with watchers and event-driven calls for this.
这篇关于将VueJS组件渲染到Google Map Infowindow中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!