Vue combinado con el mapa de Gaode para realizar una ventana emergente de información personalizada de escritura HTML

Cuando estaba escribiendo un proyecto recientemente, era necesario mostrar la información correspondiente haciendo clic en el punto del mapa. La ventana emergente se ve bastante elegante. Descubrí cómo personalizar la ventana emergente en el sitio web oficial de AutoNavi y otras plataformas importantes, pero la mayoría de ellas están escritas en estructura HTML a través de JS. Siento que esto no solo no es bueno para el diseño, sino que también tiene mala legibilidad y mantenibilidad Es mejor escribir HTML directamente. Entonces estaba pensando, ¿esta ventana emergente se puede escribir en HTML?

La respuesta es: ¡ sí !

Las representaciones son las siguientes:

Primero hablemos de la idea. Al leer la introducción de InfoWindow en el documento oficial de AutoNavi Maps, podemos ver que el contenido de visualización de la ventana emergente de información puede ser una cadena de elementos HTML o un objeto HTMLElement . Entonces pensé, ¿no es posible this.$refsobtener el nodo DOM del elemento en Vue? Entonces comencé mi primer intento.

Primero mire los tipos de datos devueltos por el fondo:

      data: [
        {
    
    
          id: '1', //id
          projectName: 'xxxx项目', //项目名称
          address: '山东省济南市市中区xxxxxxxxxx', //项目地址
          sketchMapUrl: '116.998232,36.651352', //项目坐标
          startDate: '2022-06-18', //计划开始日期
          completedDate: '2022-11-18', //计划结束日期
          progress: '78', //施工进度
          buildPeople: '32', //施工人员
          alarmNum: '8' //告警信息数目
        },{
    
    
          id: '2', //id
          projectName: 'xxxx项目', //项目名称
          address: '山东省济南市市中区xxxxxxxxxx', //项目地址
          sketchMapUrl: '116.998232,36.651352', //项目坐标
          startDate: '2022-06-18', //计划开始日期
          completedDate: '2022-11-18', //计划结束日期
          progress: '78', //施工进度
          buildPeople: '32', //施工人员
          alarmNum: '8' //告警信息数目
        }
      ],

Cuando vi este tipo de datos, ¿no usé v-for? Pero en este momento, surge el problema, ¡ no puede reproducir directamente los datos devueltos por el fondo!
Hay dos razones:

1. La propiedad de contenido de AMap.InfoWindow del mapa de Gaode no admite múltiples nodos raíz DOM
2. No sé en qué punto hizo clic el usuario

Debe filtrarse para determinar el punto en el que el usuario hace clic.

this.data.map((item) => {
    
    
    this.arr = item.sketchMapUrl.split(',')
    //自定义点图标
    this.marker = new AMap.Marker({
    
    
        map: this.map,
        icon: this.icon,
        position: [this.arr[0], this.arr[1]],
        offset: new AMap.Pixel(-13, -30),
        //注意，我这里判断是给点加了个额外的参数，就是数据的id
        extData: item.id
    })
    this.marker.on('click', (e) => {
    
    
        this.singleData = []
        //这里通过e.target._opts.extData和item.id进行比对，如果相同则把这项点的信息单独放一个数组里去遍历，就是html里的遍历数组
        if (e.target._opts.extData === item.id) {
    
    
           this.singleData.push(item)
        }
    this.infoWindow.open(this.map, e.target.getPosition())
    })
})

En este momento, puede juzgar el punto de clic y el siguiente paso es realizar la ventana emergente personalizada.
el código se muestra a continuación:

<template>
  <div class="web-box">
  	 <!-- 地图 -->
    <div id="map"></div>

    <!-- 地图弹窗 -->
    <div ref="infoWindow" class="infoWindow" >
      <div class="container" v-for="(item,index) in singleData" :key="index">
	    <!-- 这里面写弹窗布局样式 -->
      </div>
  </div>
</template>

codigo js:

 //自定义信息窗体
this.infoWindow = new AMap.InfoWindow({
    
    
  	isCustom: true,
  	autoMove: true,
	avoid: [20, 20, 20, 20],
    content: this.$refs.infoWindow,
    closeWhenClickMap: true,
    offset: new AMap.Pixel(16, -30)
})

Al this.$refs.infoWindowescribir el nodo emergente en HTML y colocarlo en el contenido, ¡no necesitamos escribir algunos códigos como este innerHTML!appendChild