javascript - 将 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({
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>
但是,这不起作用,窗口是空白的。
解决方案
在今天重温这个之后,我能够通过以编程方式创建 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>);
注意:我没有尝试过观察者和事件驱动的调用。
推荐阅读
- javascript - 重新组合数组 angular 4 中的相似元素
- python - 在python中绘制轮廓
- firefox - 缺少 Firefox WebIDE 模拟器选项
- c# - C# 获取 7.1 音频中每个扬声器的音频音量
- javascript - 保存用户在 React 中添加的输入状态
- android - 没有可靠地调用 UtteranceProgressListener
- c++ - 在 linux 中关闭 udp 套接字后,recv 不返回
- java - ConstraintLayout 中的 Gone 元素会留下幽灵空间
- java - 如何从 Windows 命令行将 .dex 文件转换为 jar 类型?
- r - 向量化绘图的串联文本标签