将 VueJS 组件渲染到 Google Map Infowindow 中 [英] Rendering VueJS components into a Google Map Infowindow
问题描述
我正在尝试渲染一个简单的 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({内容:infowindow_content，});this.current_infowindow.open(context.mapObject, 标记);而 vueJS 组件是 -
<div>{{内容}}<脚本>模块.出口 = {name: 'google-map-infowindow',道具: ['内容'，],}
但是，这不起作用并且窗口是空白的.
在今天重温这个之后，我能够通过以编程方式创建 vue 组件的实例并在简单地将其呈现的 HTML 模板作为信息窗口的内容传递之前安装它来做到这一点.
InfoWindow.vue
<div>{{内容}}<脚本>模块.出口 = {name: '信息窗口',道具: ['内容'，],}
在打开信息窗口之前需要创建的代码部分:
<代码>...从 './InfoWindow.vue' 导入 InfoWindowComponent；...var InfoWindow = Vue.extend(InfoWindowComponent);var 实例 = 新的信息窗口({道具数据:{content: 这显示为信息窗口内容！";}});实例.$mount();var new_infowindow = new google.maps.InfoWindow({内容:instance.$el,});new_infowindow.open(<地图对象>,<标记>);注意:我还没有为此尝试过观察者和事件驱动的调用.
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);
And the vueJS component being -
<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.
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屋！
