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({
    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 템플릿을 infow의 콘텐츠로 전달함으로써 이를 수행할 수 있었습니다.

Info Window.표시하다

<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>);

주의: 저는 이에 대한 감시자 및 이벤트 주도 전화에 대해 실험해 본 적이 없습니다.

vue.js 템플릿 보간에서 "double moustaches"는 내용을 HTML이 아닌 일반 텍스트로 해석합니다(따라서 이스케이프합니다).HTML 을 송신하려면 , 유저에 의해서v-html지시:

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

자세한 내용은 가이드의 원시 HTML 및 v-html API 문서를 참조하십시오.

이 방법에서는 데이터 바인딩이 고려되지 않기 때문에 raw HTML을 조작하는 것이 최선의 전략인지 잘 모르겠습니다.

언급URL : https://stackoverflow.com/questions/50088994/rendering-vuejs-components-into-a-google-map-infowindow