百度地图之infoWindow插入vue组件

1. 在csdn上找到一个老哥的方法使用Vue.extend

let optsion = {
    width: 390, // 信息窗口宽度
    height: 0, // 信息窗口高度
    title: `温馨提示(自定义)`, // 信息窗口标题
    enableMessage: true // 设置允许信息窗发送短息
}
var p = e.target
var point = new window.BMap.Point(
    p.getPosition().lng,
    p.getPosition().lat
)

let MyComponent = Vue.extend({
    template:
    `<div class="mapgrayInfo" ><div class="title">{{item.name}}</div>` +
    `<div class="content"><h5>状态：<span>正常</span></h5>` +
    `<p>详情：这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情</p>` +
    `</div></div>`,
    data () {
    return {
        item: item
    }
    },
    mounted () {},
    computed: {},
    methods: {}
})

let component = new MyComponent().$mount()
var infoWindow = new window.BMap.InfoWindow(component.$el, optsion) // 创建信息窗口对象
map.openInfoWindow(infoWindow, point) // 开启信息窗口
————————————————
版权声明：本文为CSDN博主「墨书白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xunyicao_e/article/details/112775627

2. 受到1启发，也可以直接传入组件（card为引入并注册过的vue组件）

      setInfoWindow(e) {
        console.log(e)
        const option = {
          width: 270, // 信息窗口宽度
          height: 100, // 信息窗口高度
          // title: `温馨提示(自定义)`, // 信息窗口标题
          // enableMessage: true // 设置允许信息窗发送短息
        }
        let MyComponent = Vue.extend({
          // template:
          //   `<div class="mapgrayInfo" ><div class="title">{{item.name}}</div>` +
          //   `<div class="content"><h5>状态：<span>正常</span></h5>` +
          //   `<p>详情：这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情这是详情</p>` +
          //   `</div></div>`,
          render: h => h(card)
        })
        let component = new MyComponent().$mount()
        let infoWindow = new window.BMap.InfoWindow(component.$mount().$el, option)
        this.map.openInfoWindow(infoWindow, point)
      }