如何在 Bing 地图中使用像 Infobox 这样的 Vue 组件

Question

我想在 Bing 地图中使用我自己的 Vue 组件，例如 Infobox。我不确定是否可能，您认为是吗？

// my parent component
components : {
     Infobox
}
mounted(){

     //...code loading Bing Maps

     this.infobox = new Microsoft.Maps.Infobox({latitude: 0, longitude: 0}, {
          visible: false,
          autoAlignment: true,
          htmlContent: Infobox //inject here my vue component
     });

     this.infobox.setMap(this.map);
}

Bing Maps | Dev Center - Add custom infobox

Answer 1

我的想法是创建另一个 Vue 应用程序，然后将其挂载到将由 htmlContent 字符串创建的元素。

import Infobox from '...'

...
  mounted () {
    this.infobox = new Microsoft.Maps.Infobox({ latitude: 0, longitude: 0 }, {
      htmlContent: '<div id="infobox"></div>'
    })

    this.infobox.setMap(this.map)

    setTimeout(() => {
      let component = new(Vue.extend(Infobox))()
      component.$mount(document.getElementById('infobox'))
    })
  }
...

Example

Answer 2

它工作正常，但如果你想使用 String 类型的道具，它们不是反应式的。

propsData: {
    title: this.infobox[0]._options.title, //not reactive
    close: $this.closeInfobox, //works
    itineraryTransit: $this.itineraryTransit, //works
    itineraryCar: $this.itineraryCar, //works        
}

如何在 Bing 地图中使用像 Infobox 这样的 Vue 组件

How to use a Vue component like Infobox in Bing Maps

bing-maps

vue.js