高德地图的marker的content是vue组件

一开始是直接使用字符串模板，由于card还需要一些动画，动画样式代码就只能写在外层父组件中了。这样不太好，因此想封装一个vue组件，在组件内写样式，然后组件赋值给content。

//原代码
var marker = new window.AMap.Marker({
          position: new window.AMap.LngLat(...item.center),
          content:`<div class="card-animation">${item.name}${item.value}</div>`,
        })

//修改后
//这个函数创建了一个 Vue 实例，将 props 数据传递给组件，然后将其挂载到 DOM 上，并返回其外部 HTML
createVueComponentHTML(component, propsData) {
      const Ctor = Vue.extend(component)
      const vm = new Ctor({ propsData }).$mount()
      return vm.$el.outerHTML
}, 
//...
 var marker = new window.AMap.Marker({
          position: new window.AMap.LngLat(...item.center),
          content: this.createVueComponentHTML(TipCard, {
            name: item.name,
            value: item.value,
            label: item.label
          }),
          ...
        })

一、封装组件Card

<template>
<div class="card-animation">{{name}}{{value}}{{label}}</div>
</template>
<script>
export default {
  props:['name','value','label']
}
</script>
<style lang="scss" scoped>
::v-deep(.card-animation) {
  animation: sign_rotateX linear 12s infinite alternate;
}

@keyframes sign_rotateX {
  0% {
    transform: rotateX(15deg) rotateY(15deg);
  }

  100% {
    transform: rotateX(-15deg) rotateY(-15deg);
  }
}
</style> 

二、在父组件中声明一个createVueComponentHTML方法,然后content调用

import Card from '@/components/Card/index.vue'
export default {
components:{
    Card
},
mounted(){
this.showCard()
},
methods:{
 // 本文重点代码
  createVueComponentHTML(component, propsData) {
      const Ctor = Vue.extend(component)
      const vm = new Ctor({ propsData }).$mount()
      return vm.$el.outerHTML
  },
  showCard(){
      let data = [
      {
        center: [经度，纬度],
        label: "标题",
        name: "名称",
        value: 10
      },
      ...
      ]
      var markers = []
      data.forEach((item)=>{
       var marker = new window.AMap.Marker({
          position: new window.AMap.LngLat(...item.center),
          content: this.createVueComponentHTML(Card, {
            name: item.name,
            value: item.value,
            label: item.label
          }),
          anchor: 'bottom-center',
          offset: new window.AMap.Pixel(0, 10),
          cursor: 'default',
          extData: item.name
        })
        markers.push(marker)
     })
     //...(把markers添加到map中)
  }
}
}