uni-app #功能需求# map组件的marker上的height、width等属性，在h5+app上无效

同问

在uni-app中，map组件的marker上的height、width等属性在H5及App平台上可能会存在兼容性问题，特别是在H5+App环境下。这通常是因为不同平台对原生组件的渲染差异导致的。为了确保marker在不同平台上能够正确显示，我们可以通过自定义图标的方式来解决这个问题。

以下是一个使用自定义图标（图片）作为marker的示例代码，这样可以确保在不同平台上都能正确显示图标的大小和样式：

<template>
  <view>
    <map
      id="map"
      :latitude="latitude"
      :longitude="longitude"
      scale="15"
      style="width: 100%; height: 300px;"
    >
      <cover-view>
        <cover-image
          v-for="(marker, index) in markers"
          :key="index"
          :src="marker.iconPath"
          :style="{
            position: 'absolute',
            left: `${marker.left}px`,
            top: `${marker.top}px`,
            width: `${marker.width}px`,
            height: `${marker.height}px`
          }"
        />
      </cover-view>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.908823, // 北京纬度
      longitude: 116.397470, // 北京经度
      markers: [
        {
          iconPath: '/static/marker.png', // 自定义图标的路径
          left: 100, // 相对于map组件左上角的水平偏移量
          top: 100, // 相对于map组件左上角的垂直偏移量
          width: 50, // 图标的宽度
          height: 50 // 图标的高度
        }
      ]
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需求调整 */
</style>

在这个示例中，我们使用cover-view和cover-image来覆盖在map组件上，实现自定义图标的显示。cover-view和cover-image是uni-app提供的用于覆盖在原生组件上的组件，确保能够在map组件上正确显示。

注意，自定义图标的路径/static/marker.png需要替换为你实际的图标路径。同时，图标的偏移量（left和top）、宽度（width）和高度（height）需要根据实际需求进行调整。

这种方法虽然增加了代码的复杂度，但能够确保marker在不同平台上都能正确显示，且样式可控。如果你希望进一步简化代码或实现更多功能，可以考虑使用第三方地图服务提供的SDK，这些SDK通常提供了更丰富的API和更好的兼容性支持。