uni-app map组件强化

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

uni-app map组件强化

map组件强化

  1. 多边形、圆形或其他图形可设置透明度。虽然官方文档上写到可以使用8位十六进制设置alpha值，但实际上并没有实现，至少在iOS上是没有实现，Android还没有测试；

Image from dcloud

  1. 优化marker的显示隐藏之间的切换。设置多种marker，不同图标之间来回显示切换时，会出现上一种或上几种图标并没有消失的情况，而且当前应显示的图标显示不全，即便显示也会出现点击事件无效的情况。

以上一些需求及建议，望采纳。


Harmonyos Next教程
3 回复

请问是vue还是nvue页面？


nvue页面，在HbuilderX里创建的uni演示项目，直接在map.nvue里改的

针对uni-app中map组件的强化，我们可以通过自定义覆盖物、增加事件处理、以及优化性能等方面来实现。以下是一些代码示例，展示了如何对uni-app中的map组件进行增强。

1. 自定义覆盖物

自定义覆盖物可以用来在地图上显示自定义的图标或信息。我们可以使用cover-view和cover-image组件来实现。

<template>
  <view>
    <map
      id="map"
      longitude="116.397428"
      latitude="39.90923"
      scale="14"
      markers="[{id: 1, latitude: 39.90923, longitude: 116.397428}]"
      style="width: 100%; height: 400px;"
    >
      <cover-view latitude="39.90923" longitude="116.397428" style="width: 50px; height: 50px; background: red; border-radius: 50%; position: absolute; top: -25px; left: -25px;">
        <cover-view style="text-align: center; line-height: 50px; color: white;">A</cover-view>
      </cover-view>
    </map>
  </view>
</template>

2. 增加事件处理

通过监听地图的点击、拖动等事件，可以实现更多交互功能。

export default {
  methods: {
    onTap(e) {
      console.log('Map tapped at:', e.detail.latitude, e.detail.longitude);
    },
    onRegionChange(e) {
      console.log('Map region changed:', e.detail);
    }
  }
}

在模板中绑定这些事件：

<map
  id="map"
  longitude="116.397428"
  latitude="39.90923"
  scale="14"
  @tap="onTap"
  @regionchange="onRegionChange"
  style="width: 100%; height: 400px;"
>
  <!-- Cover views and markers here -->
</map>

3. 优化性能

对于大数据量的标记点，可以通过分页加载或动态加载的方式来优化性能。

export default {
  data() {
    return {
      markers: [] // 初始标记点
    };
  },
  mounted() {
    this.loadMarkers();
  },
  methods: {
    loadMarkers() {
      // 模拟异步加载标记点
      setTimeout(() => {
        this.markers = [
          // 大量标记点数据
          {id: 1, latitude: 39.90923, longitude: 116.397428},
          // ...更多标记点
        ];
      }, 1000);
    }
  }
}

在模板中使用markers：

<map
  id="map"
  longitude="116.397428"
  latitude="39.90923"
  scale="14"
  :markers="markers"
  style="width: 100%; height: 400px;"
>
  <!-- Cover views here -->
</map>

以上代码展示了如何在uni-app中通过自定义覆盖物、增加事件处理以及优化性能来强化map组件。根据具体需求，你可以进一步扩展这些功能。

回到顶部