uni-app 期待原生map组件优化 目前map组件的marker在app端不支持callout label支持也不够好 期待早日支持callout

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

uni-app 期待原生map组件优化 目前map组件的marker在app端不支持callout label支持也不够好 期待早日支持callout

插件需求

期待原生map组件优化, 目前map组件的marker 在app端不支持 callout, label支持也不够好 期待早日支持callout

1 回复

针对您提到的uni-app中原生map组件的优化需求,特别是关于marker的callout支持,虽然目前官方可能还未完全实现所有期望的功能,但我们可以尝试通过一些变通的方法或者自定义组件来实现类似的效果。以下是一个简单的示例,展示如何在uni-app中通过自定义组件模拟实现marker的callout功能。

示例代码

首先,我们创建一个自定义组件CustomCallout.vue,用于显示callout。

<template>
  <view v-if="visible" class="callout" :style="calloutStyle">
    <slot></slot>
  </view>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    position: {
      type: Object,
      default: () => ({ left: 0, top: 0 })
    }
  },
  computed: {
    calloutStyle() {
      return {
        transform: `translate3d(${this.position.left}px, ${this.position.top}px, 0)`,
        // 添加其他样式如背景、边框等
        backgroundColor: 'white',
        padding: '10px',
        borderRadius: '5px',
        boxShadow: '0 0 10px rgba(0,0,0,0.1)'
      };
    }
  }
};
</script>

<style scoped>
.callout {
  position: absolute;
  z-index: 1000; /* 确保callout显示在其他元素之上 */
}
</style>

然后,在包含map组件的页面中,使用这个自定义组件来模拟callout。

<template>
  <view class="container">
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      scale="14"
      @tap="onMapTap"
      style="width: 100%; height: 100%;"
    >
      <marker
        v-for="(marker, index) in markers"
        :key="index"
        :id="marker.id"
        :longitude="marker.longitude"
        :latitude="marker.latitude"
      />
    </map>
    <CustomCallout
      v-if="showCallout"
      :visible="true"
      :position="calloutPosition"
    >
      <text>Callout Content</text>
    </CustomCallout>
  </view>
</template>

<script>
import CustomCallout from '@/components/CustomCallout.vue';

export default {
  components: { CustomCallout },
  data() {
    return {
      // ...其他数据
      showCallout: false,
      calloutPosition: { left: 0, top: 0 }
    };
  },
  methods: {
    onMapTap(e) {
      // 计算并设置callout位置
      this.showCallout = true;
      this.calloutPosition = {
        left: e.detail.x - 50, // 假设callout宽度为100px,居中显示
        top: e.detail.y - 50
      };
    }
  }
};
</script>

上述代码通过监听map的tap事件,动态设置callout的位置和显示状态,实现了一个简单的模拟callout功能。虽然这不是原生支持,但可以作为临时解决方案,直到官方提供更完善的支持。

回到顶部