InfoWindow of Baidu Map is inserted into the Vue component

1. Find an old brother’s way on CSDN using vue.extend

let optsion = {
    width: 390.// Information window width
    height: 0.// Info window height
    title: 'Warm tips (custom)'.// Info window title
    enableMessage: true // Set to allow Windows to send SMS messages
}
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 > condition: normal < / span > < span > < / h5 > ` +
    '
 detail: this is detail this is detail this is detail this is detail this is detail this is detail this is detail this is detail this is detail this is detail this is detail 
' +
    `</div></div>`,
    data () {
    return {
        item: item
    }
    },
    mounted () {},
    computed: {},
    methods: {}})let component = new MyComponent().$mount()
var infoWindow = new window.BMap.InfoWindow(component.$el, optsion) // Create an information window object
map.openInfoWindow(infoWindow, point) // Open the info window———————————————— Copyright notice: This article is an original article by CSDN blogger "Ink Book White", following CC4.0By-sa copyright agreement, please attach the original source link and this statement. HTTPS://blog.csdn.net/xunyicao_e/article/details/112775627
Copy the code

2. Inspired by 1, you can also pass in components directly (card is an imported and registered VUE component)

      setInfoWindow(e) {
        console.log(e)
        const option = {
          width: 270.// Information window width
          height: 100.// Info window height
          // title: 'Warm reminder (custom)', // Message window title
          // enableMessage: true // Enables the message window to send SMS messages
        }
        let MyComponent = Vue.extend({
          // template:
          // `
      

       

        {{item.name}}
       
` +
      
          / / ` < div class = "content" > < h5 > condition: normal < / span > < span > < / h5 > ` +
          // '
 details: this is details this is details this is details this is details this is details this is details this is details this is details 
' +
          // ``,
          render: h= > h(card)
        })
        let component = new MyComponent().$mount()
        let infoWindow = new window.BMap.InfoWindow(component.$mount().$el, option)
        this.map.openInfoWindow(infoWindow, point)
      }
Copy the code