uni-app map组件无法加载自定义地图中的第三方数据

uni-app map组件无法加载自定义地图中的第三方数据

测试过的手机：

iphone12\16 HuaweiP40 OPPOFindX5 ……

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

示例代码：

<map id="amap"  
style="page"
show-location="false"
show-scale="true"
show-compass="true"
longitude="121"
latitude="29"
scale="scale"
layer-style="'a205ce3fe740002704cfb8e099773fb0'"
></map>

操作步骤：

  • 正常步骤

预期结果：

  • 显示我要的自定义地图

实际结果：

  • 仅能显示底图

bug描述：

在map组件中设置了 :layer-style="'a205ce3fe740002704cfb8e099773fb0'" ，能够正常显示自定义地图的底图，但无法加载自定义地图中的第三方数据（图层）。 通过高德工单咨询，得到回复： 经过研发排查，您发给我的样式显示的是卫星图层，卫星图和自定义样式冲突，目前自定义样式优先级更高，如果要显示开启卫星图层，需要先关闭自定义样式，Android端开启卫星图层方法： AMap.setMapType(AMap.MAP_TYPE_SATELLITE);// 卫星地图模式 IOS端开启卫星图方法：

///地图类型。注意：自定义样式优先级高于mapType，如开启了自定义样式，要关闭自定义样式后mapType才生效
@property (nonatomic) MAMapType mapType;


更多关于uni-app map组件无法加载自定义地图中的第三方数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以参考原生组件的实现，自定义实现：https://ext.dcloud.net.cn/search?q=谷歌地图

更多关于uni-app map组件无法加载自定义地图中的第三方数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题分析：

  1. 根据高德官方回复，自定义地图样式和卫星图层存在冲突，自定义样式优先级更高
  2. 当前代码中通过layer-style设置了自定义样式，导致无法显示第三方数据图层

解决方案：

  1. 移除layer-style属性或设置为空字符串
  2. 使用map组件的@controltap事件监听地图控件点击
  3. 在事件回调中通过条件判断切换地图类型：
methods: {
  controltap(e) {
    if(e.controlId === 1) { // 假设1是卫星图按钮
      // 安卓切换
      // #ifdef APP-ANDROID
      const amap = uni.requireNativePlugin('AMapModule')
      amap.setMapType(amap.MAP_TYPE_SATELLITE)
      // #endif
      
      // iOS切换
      // #ifdef APP-IOS
      this.mapType = 'satellite'
      // #endif
    }
  }
}
回到顶部