uniapp map组件 自定义callout气泡插槽

直接上代码

    <map
      id="map"
      class="map-all"
      latitude="31.538099"
      longitude="104.703714"
      :enable-3D="true"
      scale="16"
      :markers="markers"
      :strokeColor="strokeColor"
      :strokeWidth="strokeWidth"
      :polyline="taskLine"
      :customCallout="callout"
      @markertap="markertap"
      @labeltap="markertap" 
      show-location
    >
      <cover-view slot="callout">
        <block v-for="(item, index) in markers" :key="index">
          <cover-view class="customCallout" :marker-id="item.id">
            <cover-image class="avatar-image" src="/static/image/avatar.png" />
          </cover-view>
        </block>
      </cover-view>
    </map>

:customCallout="callout" //插槽

      <cover-view slot="callout">
        <block v-for="(item, index) in markers" :key="index">
          <cover-view class="customCallout" :marker-id="item.id">
            <!-- 循环markers标记点的数组，key对应id -->
            <cover-image class="avatar-image" src="/static/image/avatar.png" />
          </cover-view>
        </block>
      </cover-view>
      <!-- 自定义插槽样式 -->

js:

const markers = ref([]);
//新建一个markers数组 展示markers点
  props.markerList.forEach(it => {
    let iconPath = mie 
    let width = "16px";
    let height = "16px" ;
    iconList.forEach(item=>{
      if(it.type==item.type){
        iconPath=item.icon
        width=item.width
        height=item.height
      }
    })

    let markObj = {
      id: it.id,
      type: it.type,
      latitude: it.latitude,
      longitude: it.longitude,
      iconPath, //显示的图标，以'/'开头则表示相对小程序根目录，必须是图片格式，svg不行
      width,//设置宽高
      height,
      zIndex: it.id + 1
    };
    let label = { //marker 上的标签 label
      content: it.text, //自定义label内容
      color: "#fff",
      fontSize: "12px",
      // fontFamily: 'PingFang SC-Medium',  没有fontFamily，没有字体
      anchorX: "-4px",//设置偏移量
      anchorY: "-20px"
    };
    //设置一个callout，对应自定义的callout插槽
    let callout = {
      content: "",
      anchorX: 0,
      anchorY: 14, //这里偏移量只能要数字
      display: "ALWAYS"//常显
      // padding: 10
    };
    if (it.type == "3" || it.type == "4") {
      markObj.label = label;
    }
    if (it.type == "5") {  //根据状态不同 来确定是否渲染
      markObj.customCallout = callout;
    }
    markers.value.push(markObj); // push进markers
  });
  markersCopy.value = JSON.parse(JSON.stringify(markers.value));//深拷贝一个原数组 以便后续操作更改样式后复原
};