uniapp高德暗黑模式如何实现

在uniapp中集成高德地图时，如何实现暗黑模式的切换？目前发现高德地图JS API在web端支持theme参数，但在uniapp的nvue或vue页面中调用时，夜间模式无法生效。求教具体的实现方案，是否需要通过原生插件或特殊配置？若官方SDK不支持，是否有可行的自定义方案？

2 回复

在uniapp中，可通过判断系统主题模式，动态切换高德地图主题。使用uni.getSystemInfo获取系统主题，然后设置地图的theme属性为dark或normal。


在 UniApp 中实现高德地图的暗黑模式，可以通过以下步骤完成：

1. 引入高德地图 SDK

在 manifest.json 中配置高德地图小程序 SDK：

"mp-weixin": {
  "appid": "你的小程序 AppID",
  "setting": {
    "urlCheck": false
  },
  "usingComponents": true,
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "你的高德地图插件 ID"
    }
  }
}

2. 创建地图容器

在页面中添加地图组件：

<template>
  <view>
    <map
      id="myMap"
      style="width: 100%; height: 100vh;"
      :latitude="latitude"
      :longitude="longitude"
      :theme="mapTheme"
    ></map>
  </view>
</template>

3. 设置暗黑模式

使用高德地图的 setMapStyle 方法切换主题。暗黑模式对应样式 ID 为 "amap://styles/dark"。

示例代码：

<script>
export default {
  data() {
    return {
      latitude: 39.90923, // 默认纬度
      longitude: 116.397428, // 默认经度
      mapTheme: 'amap://styles/dark' // 暗黑主题
    };
  },
  onReady() {
    // 获取地图上下文
    this.mapCtx = uni.createMapContext('myMap', this);
  },
  methods: {
    // 切换主题（例如通过按钮触发）
    switchTheme(theme) {
      this.mapTheme = theme;
      // 强制刷新地图
      this.mapCtx && this.mapCtx.update();
    }
  }
};
</script>

4. 动态切换主题

通过按钮或系统设置触发主题切换：

<button [@click](/user/click)="switchTheme('amap://styles/dark')">暗黑模式</button>
<button [@click](/user/click)="switchTheme('amap://styles/normal')">普通模式</button>

注意事项：

  • 主题支持：确保高德地图版本支持暗黑样式（通常需 SDK 版本 ≥ 1.0.0）。
  • 性能：切换主题可能触发地图重绘，在低性能设备上注意优化。
  • 兼容性：测试在不同平台（微信、支付宝等）的渲染效果。

通过以上步骤，即可在 UniApp 中实现高德地图的暗黑模式切换。

回到顶部