uni-app H5 map组件设置marker时 iconPath会覆盖label

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app H5 map组件设置marker时 iconPath会覆盖label

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

class MarkerBean {
constructor(id, latitude, longitude, callout, content) {
this.id = id;
this.latitude = latitude;
this.longitude = longitude;
this.callout = callout
this.iconPath = “/static/callout.png”
this.label = {
content: String(content),
color: ‘#000’,
x: -4,
y: -20,
textAlign: ‘center’,
}
}
}

class MarkerCallOut {
constructor(content, color, fontSize, borderRadius) {
this.content = content;
this.color = color;
this.fontSize = fontSize;
this.borderRadius = borderRadius;
this.padding = 10
this.bgColor = “rgba(255,255,255,.9)”
// this.display = ‘ALWAYS’
}
}

export {
MarkerBean,
MarkerCallOut
}


# 操作步骤：


<map name="map" class="map-view"   
    :markers="markers" ></map>  

创建MarkerBean,MarkerCallOut对象塞在markers数组里

预期结果：

label可以显示在iconPath上


# 实际结果：


label可以被iconPath覆盖

Harmonyos Next教程
2 回复

constructor(id, latitude, longitude, callout, content) {
this.id = id;
this.latitude = latitude;
this.longitude = longitude;
this.callout = callout
this.label = {
content: <div style="position:relative;width:40px;height:40px;"> <img src="/static/callout.png" style="width:40px;height:40px;" /> <span style="position: absolute;left: 50%;top:40%;transform: translate(-50%,-50%);color:#fff;font-size:12px;">${content}</span> </div>,
color: ‘#000’,
x: -4,
y: -20,
textAlign: ‘center’,
}
this.iconPath = “/static/callout.png”
this.width = 1
this.height = 1
}

从前辈手里学到的 在H5里可以这么用 label里的content可以写div自己调样式 ，所以就不存在这个覆盖问题了，涨知识了


在uni-app中，H5平台的map组件使用marker时，确实存在iconPath覆盖label的情况。这通常是因为iconPath指定的图标较大或者位置设置不当导致的。为了解决这个问题，你可以通过调整marker的样式和位置来确保label能够正确显示。

以下是一个示例代码，展示了如何在uni-app的H5平台上使用map组件，并设置marker的iconPath和label，同时避免iconPath覆盖label的问题。

<template>
  <view>
    <map
      id="map"
      longitude="116.397428"
      latitude="39.90923"
      scale="14"
      markers="{{markers}}"
      style="width: 100%; height: 500px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      markers: [
        {
          id: 1,
          latitude: 39.90923,
          longitude: 116.397428,
          iconPath: '/static/marker.png',  // 自定义图标路径
          width: 50,  // 图标宽度
          height: 50,  // 图标高度
          label: {
            content: 'Marker Label',
            color: '#fff',  // 标签文字颜色
            fontSize: 14,  // 标签文字大小
            borderWidth: 2,  // 标签边框宽度
            borderColor: '#000',  // 标签边框颜色
            bgColor: 'rgba(0, 0, 0, 0.5)',  // 标签背景颜色
            padding: [5, 10],  // 标签内边距 [上, 右, 下, 左]
            anchorX: 0.5,  // 标签锚点X轴比例
            anchorY: 1.5,  // 标签锚点Y轴比例（注意调整以避免被图标覆盖）
          },
          anchorX: 0.5,  // 图标锚点X轴比例
          anchorY: 1,  // 图标锚点Y轴比例
        },
      ],
    };
  },
};
</script>

<style scoped>
/* 可选：调整map组件的样式 */
</style>

在这个示例中，我们注意以下几点：

  1. 调整label的anchorY：将anchorY设置为一个较大的值（如1.5），以确保label位于图标的上方，从而避免被图标覆盖。
  2. 调整图标和label的anchorX：确保它们都以中心点为锚点，以便更好地控制位置。
  3. 设置图标的width和height：确保图标大小适中，不会过大导致label无法显示。

你可以根据实际需求调整这些参数，以达到最佳显示效果。通过这种方式，你可以有效地避免iconPath覆盖label的问题。

回到顶部