vue 使用组件方式 自定义 infoWindow 样式

 效果展示：

1.先遍历好marker，为marker添加markerData 属性，用于给组件传值。

点击marker的时候，调用setInfoWindow() 

  initMarker() {
      this.markers = [];
        //本地模拟的数据
      this.axios.get("/device.json").then((res) => {
        let list = res.data;
        list.map((data) => {
          var content;
         //这个是自定义的marker样式，由于有3种状态,所以写了3种。
          if (data.status == 1) {
            content = `<div class='goodDevice DeviceStyle'>${data.voltage}</div>`;
          } else if (data.status == 2) {
            content = `<div class='warningDevice DeviceStyle' >${data.voltage}</div>`;
          } else if (data.status == 3) {
            content = `<div class='alarmDevice DeviceStyle'>${data.voltage}</div>`;
          }
          var marker = new AMap.Marker({
            position: new AMap.LngLat(data.longitude, data.latitude),
            content: content,
            //点标记显示位置偏移量
            offset: new AMap.Pixel(-15, -15),
          });
          // 将data数据存放到marker下
          marker.markerData = data;
          marker.on("click", (e) => {
            //自定义点击弹窗
            this.setInfoWindow(e);
          });
          this.markers.push(marker);
        });
        // 将markers添加到地图实例
        this.map.add(this.markers);
      });
    },


   // 设置info弹窗
    setInfoWindow(e) {
       //console.log(e);
      //this.markerData 是我在data()中定义的,用来给子组件传值
      this.markerData = e.target.markerData;
      let infoWindow = new AMap.InfoWindow({
        //挂载的组件
        content: this.$refs.infoWindow.$el,
      });
      infoWindow.open(this.map, e.target.getPosition());
    },

2.引入弹窗组件。

 3.弹窗组件接收markerData 再赋值就好了 

<template>
  <div class="device_info_wrap">
    <div class="wrap_top">
      <div class="status_row">
        <div class="status_icon">
          <i
            :class="{
              'el-icon-success': markerData.status == 1,
              'el-icon-warning': markerData.status == 2,
              'el-icon-error': markerData.status == 3,
            }"
          ></i>
        </div>
        <div class="device_info">
          <div class="device_name">{{ markerData.name }}</div>
          <div class="device_status">
            <span class="success_span" v-if="markerData.status == 1">
              Device success
            </span>
            <span class="warning_span" v-else-if="markerData.status == 2">
              Device success
            </span>
            <span class="error_span" v-else> Device error </span>
          </div>
        </div>
      </div>
      <div class="info_row">
        <div class="dianliang">78% <img src="" alt="" /></div>
        <div class="other_info">
          <div class="time_text">2022/03/08/ 18:11(UTC)</div>
          <div class="tool_btn">
            <div class="screen_btn">FullScreen</div>
            <div class="graph_btn">Map Graph</div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrap_content">
      <div class="item_info">
        <div class="item_value">{{ markerData.temp }}℃</div>
        <div class="item_type">Temp</div>
      </div>
      <div class="item_info">
        <div class="item_value">{{ markerData.wind }}m/s</div>
        <div class="item_type">Wind spd</div>
      </div>
      <div class="item_info">
        <div class="item_value">{{ markerData.Hum }}%RH</div>
        <div class="item_type">Hum</div>
      </div>
      <div class="item_info">
        <div class="item_value">{{ markerData.rain }}mm/h</div>
        <div class="item_type">Rain-f</div>
      </div>
      <div class="item_info">
        <div class="item_value">{{ markerData.press }}hPa</div>
        <div class="item_type">Press</div>
      </div>
      <div class="item_info">
        <div class="item_value">{{ markerData.latitude }}°N</div>
        <div class="item_type">Latitude</div>
      </div>
      <div class="item_info">
        <div class="item_value">{{ markerData.longitude }}°W</div>
        <div class="item_type">Longitude</div>
      </div>
      <div class="item_info">
        <div class="item_value">{{ markerData.voltage }}V</div>
        <div class="item_type">Voltage</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["markerData"],
  data() {
    return {};
  },
};
</script>