如何在Bing Maps中使用Vue组件例如Infobox

问题描述

我想使用自己的Vue组件，例如Bing Maps中的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

解决方法

我的想法是创建另一个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

Example

,

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

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