uni-app map组件无法加载在线个性化地图

uni-app map组件无法加载在线个性化地图

操作步骤：

<map class="map" layer-style="xxxxxxxxxxxxxxx"></map>

预期结果：

会加载出在高德控制台配置的个性化地图

实际结果：

加载的个性化地图，通过拖拽、放大缩小等一系列操作，又变回了经典样式的地图

bug描述：

使用高德个性化地图，发布后生成一个id，将id填入layer-style属性中，初始加载可以看到在线个性化样式，但经过一系列拖拽、放大缩小等操作，又变回了经典样式，请问是我配置哪里错了吗？

图片

Image 1

Image 2


更多关于uni-app map组件无法加载在线个性化地图的实战教程也可以访问 https://www.itying.com/category-93-b0.html

17 回复

请上传一个可复现问题的工程，方便排查

更多关于uni-app map组件无法加载在线个性化地图的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，感谢在百忙之中抽空解决我的问题，上传的附件这是我写的一个dome。实际上在我的实际项目里，从个性化样式切回经典样式的过程，只有几秒，但在这个dowm示例项目里，可以维持1-2分钟。因为这个问题项目一直没有验收，希望能尽早帮我解决这个问题。

这是我录制的视频，反应了我的问题

大佬好请问一下为什么我高德地图使用个性化地图没有效果layer-style=“8df2a5adf38b30d49770ed53e993bcff”。谢谢

你购买了吗？

遇到了同样的问题，大佬解决了吗

遇到同样的问题，本地测试自定义地图可以显示大概过了4分钟左右就恢复回来了 打自定义包直接不显示（已购买）大佬解决这个问题了吗

用自定义基座就行了

回复 6***@qq.com: 我用了自定义还是不行

回复 张181: 无解

请问楼主这个问题有办法解决吗？

nvue map 高德地图组件升级、离线个性化地图、离线设置样式文件、可使用nvue map 所有功能：https://ext.dcloud.net.cn/plugin?id=7637

时间过去一坤年了,刚刚使用map配置个性化地图还是和楼主情况一样,配置后过几秒后又自动恢复成经典地图了,请问楼主解决了吗

能具体描述问题吗，提供效果截图和代码截图可以高效率解决问题

vue3 nvue app 安卓和ios使用map组件使用高德地图按文档传layer-style后初始化打开app的时候成功显示配置的个性化地图,不管操不操作都是过秒或者几十秒都会自动恢复成默认地图样式,必现

vue3 nvue app 安卓和ios使用map组件使用高德地图按文档传layer-style后初始化打开app的时候成功显示配置的个性化地图,不管操不操作都是过秒或者几十秒都会自动恢复成默认地图样式,必现

这是一个已知的uni-app map组件在高德地图平台上的兼容性问题。问题根源在于高德地图JS API的底层实现机制。

问题分析： 当使用高德个性化地图时，layer-style属性确实能正确应用初始样式。但在用户进行地图交互（拖拽、缩放）时，高德地图引擎会重新渲染地图瓦片。在某些情况下，重新渲染过程会丢失个性化样式配置，回退到默认的经典样式。

解决方案：

  1. 使用高德地图原生API（推荐） 对于需要稳定个性化地图显示的场景，建议通过<map>组件的@loaded事件获取地图实例后，直接调用高德原生API设置样式：

    onMapLoaded(e) {
  const mapObj = e.detail.map
  // 使用高德原生API设置个性化地图
  mapObj.setMapStyle('amap://styles/xxxxxxxxxxxxxxx')
}

  2. 监听地图变化事件 可以监听地图的regionchange事件，在每次地图变化后重新应用样式：

    onRegionChange(e) {
  if(e.type === 'end') {
    this.$nextTick(() => {
      // 重新设置地图样式
    })
  }
}

  3. 检查高德地图版本 确保使用的高德地图JS API版本支持稳定的个性化地图功能。可以在manifest.json中指定较新的版本：

    "h5": {
  "sdkConfigs": {
    "maps": {
      "amap": {
        "version": "2.0"  // 使用2.0版本
      }
    }
  }
}
回到顶部