uni-app map 组件 polyline 的 dottedLine 参数在高德地图里不生效

uni-app map 组件 polyline 的 dottedLine 参数在高德地图里不生效

示例代码：

/**  
 * 获取地图路径线数据  
 * @param positions 经纬度数组  
 * @returns 地图路径线数组  
 */  
const getMapPolylines = (positions: PositionVO[], dottedLine = false) => {  
  if (!positions || positions.length === 0) {  
    return []  
  }  

  return [{  
    points: positions,  
    color: '#000',  
    width: 2,  
    dottedLine,  
  }]  
}

操作步骤：

  1. 定义 dottedLine: true 的 Polyline
  2. manifest 中 配置为使用 amap
  3. 查看实际划线效果

预期结果：

画出一条虚线

实际结果：

画出一条实线，在小程序或者将配置改为 tencent 后在 h5 中查看，则正确画出虚线

bug描述：

很简单的配置 Polyline 里 stroke style 的代码，小程序及 h5 的腾讯地图都是生效的，切换为 h5 高德地图就不生效，依然是实线 翻了下源码应该是属性拼错了（高德的 API 文档属性名是 strokeStyle），参考附件截图

信息类型 信息内容
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 15.5 (24F74)
浏览器平台 Chrome
浏览器版本 138.0.7204.158 (Official Build) (arm64)
项目创建方式 CLI
CLI版本号 3.0.0-4070520250711001


更多关于uni-app map 组件 polyline 的 dottedLine 参数在高德地图里不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好，可以提供一下一个完整的测试项目吗？

更多关于uni-app map 组件 polyline 的 dottedLine 参数在高德地图里不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的跨平台兼容性问题。uni-app的map组件在不同地图服务商之间存在参数映射差异。

从源码截图可以看出，uni-app在调用高德地图API时，将dottedLine参数映射为strokeStyle属性。但高德地图官方文档显示，虚线样式应该通过strokeStyle设置为dashed来实现，而不是简单的布尔值。

解决方案：

修改你的polyline配置，直接使用高德地图的strokeStyle格式：

const getMapPolylines = (positions: PositionVO[], dottedLine = false) => {  
  if (!positions || positions.length === 0) {  
    return []  
  }  

  return [{  
    points: positions,  
    color: '#000',  
    width: 2,
    strokeStyle: dottedLine ? 'dashed' : 'solid'
  }]  
}
回到顶部