uni-app HBuilder-Integrate-AS map 组件的 marker大小问题

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

uni-app HBuilder-Integrate-AS map 组件的 marker大小问题

如题:HBuilder-Integrate-AS map 组件的 marker 大小问题

发布成 apk 运行在真机下,marker 图标非常的小

可以看文档:

  • markers 的 width 和 height 属性
  • 平台差异说明里都只有 App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序

uni-app 项目有办法改动图标大小吗?


开发环境

版本号 项目创建方式
请提供具体信息 请提供具体信息


1 回复

在处理 uni-app 中使用 HBuilder-Integrate-AS 的 map 组件时,如果你需要调整 marker 的大小,可以通过设置 marker 的图标属性来实现。uni-app 提供的 map 组件支持自定义 marker 的图标,你可以通过指定图标路径及图标的大小来调整 marker 的显示。

以下是一个简单的代码示例,展示了如何在 uni-app 中使用 map 组件,并通过设置 marker 的图标属性来调整 marker 的大小:

<template>
  <view>
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      scale="14"
      show-location
      style="width: 100%; height: 500px;"
    >
      <marker
        v-for="(marker, index) in markers"
        :key="index"
        :id="marker.id"
        :latitude="marker.latitude"
        :longitude="marker.longitude"
        :iconPath="marker.iconPath"
        :width="marker.width"
        :height="marker.height"
      ></marker>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.397428,
      latitude: 39.90923,
      markers: [
        {
          id: 1,
          latitude: 39.90923,
          longitude: 116.397428,
          iconPath: '/static/marker_icon.png', // 自定义图标路径
          width: 50, // 图标宽度
          height: 50  // 图标高度
        },
        // 可以添加更多 marker
      ],
    };
  },
};
</script>

<style scoped>
/* 添加必要的样式 */
</style>

在这个示例中,我们定义了一个 map 组件,并设置了它的经纬度、缩放级别以及是否显示当前位置。在 map 组件内部,我们使用 marker 子组件来添加标记点。每个 marker 都有唯一的 id、经纬度、图标路径以及图标的宽度和高度。

请注意,iconPath 属性需要指向一个有效的图片路径,你可以将图片放在项目的 static 文件夹中,并通过相对路径引用它。widthheight 属性用于设置图标的宽度和高度,从而调整 marker 的大小。

这种方法允许你灵活地控制 map 组件中 marker 的显示,包括调整它们的大小和使用自定义图标。如果你需要更多的自定义功能,可以查阅 uni-app 官方文档中关于 map 组件的详细说明。

回到顶部