将 VueJS 组件渲染到 Google Map Infowindow 中

组件渲染到

关注

发信

关注(28)粉丝(399)

将 VueJS 组件渲染到 Google Map Infowindow 中

本文介绍了将 VueJS 组件渲染到 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 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 00:59