uni-app 发行方式为h5时 使用map组件的polyline属性时报错

uni-app 发行方式为h5时 使用map组件的polyline属性时报错

开发环境 版本号 项目创建方式
Mac 12.2.1 HBuilderX

产品分类：uniapp/H5

示例代码：

<map   
latitude="latitude"
longitude="longitude"
polyline="polylines"
markers="_markers">
</map>  

polylines = [
{
points: [
{
latitude: 39,
longitude: 117,
},
{
latitude: 39,
longitude: 116,
},
{
latitude: 38,
longitude: 116,
},
]
}
]  

或者：
polylines = [
{
"points": [
{
"latitude": 39,
"longitude": 117,
},
{
"latitude": 39,
"longitude": 116,
},
{
"latitude": 38,
"longitude": 116,
},
]
}
]


---

### 操作步骤：
- 给map组件polyline赋值数组时就会报错

---

### 预期结果：
- 希望h5端能正常使用polyline，并显示路径；

---

### 实际结果：
- 赋值polyline报错

---

### bug描述：
- h5使用地图组件map时（腾讯地图），传polyline路线报错： "polyline": "Error: Invalid value or type for property `<strokeColor>` ：undefined"
- `[system]Error: Invalid value or type for property `<strokeColor>` ：undefined`
- at wc (https://mapapi.qq.com/c/=/jsapi_v2/2/4/144/main.js,jsapi_v2/2/4/144/mods/geometry.js:1:32125)
- at Vc.setStrokeColor (https://mapapi.qq.com/c/=/jsapi_v2/2/4/144/main.js,jsapi_v2/2/4/144/mods/geometry.js:1:5650)
- at Vc.sb.setValues (https://mapapi.qq.com/c/=/jsapi_v2/2/4/144/main.js,jsapi_v2/2/4/144/mods/geometry.js:1:24222)
- at Vc.Qc (https://mapapi.qq.com/c/=/jsapi_v2/2/4/144/main.js,jsapi_v2/2/4/144/mods/geometry.js:1:7797)
- at Vc.rg (https://mapapi.qq.com/c/=/jsapi_v2/2/4/144/main.js,jsapi_v2/2/4/144/mods/geometry.js:1:7870)
- at new Vc (https://mapapi.qq.com/c/=/jsapi_v2/2/4/144/main.js,jsapi_v2/2/4/144/mods/geometry.js:1:12574)
- at http://localhost:8081/static/js/chunk-vendors.js:19421:278375
- at Array.forEach (<anonymous>)
- at VueComponent.createPolyline (http://localhost:8081/static/js/chunk-vendors.js:19421:278046)
- at VueComponent.init (http://localhost:8081/static/js/chunk-vendors.js:19421:277105)

发行方式为app时运行，同样的数据路线能正常显示。

从报错来看是缺少strokeColor属性，但是设置polyline时并没有这个属性

更多关于uni-app 发行方式为h5时 使用map组件的polyline属性时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

已解决，升级HBuilderX即可

更多关于uni-app 发行方式为h5时 使用map组件的polyline属性时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有报错了 但是polyline属性没生效呀，

回复 2***@qq.com: 我这里升级hbuilder即可，可能你数据不对

在使用 uni-app 开发 H5 应用时，如果你在使用 map 组件的 polyline 属性时遇到报错，可能是由于以下原因之一：

1. H5 平台不支持 map 组件的 polyline 属性

  • 原因: uni-app 的 map 组件在不同平台上的支持程度不同。在 H5 平台上，map 组件的功能可能受到限制，尤其是 polyline 属性可能不被支持。
  • 解决方案: 你可以考虑使用其他地图库（如高德地图、百度地图等）来实现类似的功能。这些地图库通常提供了更丰富的 API 和更好的跨平台支持。

2. 地图组件未正确初始化

  • 原因: 在 H5 平台上，地图组件可能需要特定的初始化步骤，如果没有正确初始化，可能会导致 polyline 属性无法正常工作。
  • 解决方案: 确保你已经正确引入了地图组件，并且在组件加载完成后才尝试设置 polyline 属性。

3. 数据格式不正确

  • 原因: polyline 属性需要特定的数据格式，如果数据格式不正确，可能会导致报错。
  • 解决方案: 检查 polyline 属性的数据格式，确保它符合要求。通常，polyline 需要包含 points 数组，每个点包含 latitude 和 longitude。

4. 平台差异

  • 原因: uni-app 的 map 组件在不同平台上的实现方式不同，H5 平台可能与其他平台（如微信小程序、App）存在差异。
  • 解决方案: 你可以通过条件编译来处理不同平台的差异。例如，在 H5 平台上使用其他地图库，而在其他平台上使用 uni-app 的 map 组件。

示例代码

以下是一个使用高德地图在 H5 平台上绘制折线的示例：

<template>
  <div id="mapContainer" style="width: 100%; height: 300px;"></div>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 引入高德地图 API
      const script = document.createElement('script');
      script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图Key';
      script.onload = () => {
        const map = new AMap.Map('mapContainer', {
          zoom: 13,
          center: [116.397428, 39.90923]
        });

        const polyline = new AMap.Polyline({
          path: [
            [116.397428, 39.90923],
            [116.407428, 39.90923],
            [116.417428, 39.90923]
          ],
          strokeColor: '#3366FF',
          strokeWeight: 5
        });

        map.add(polyline);
      };
      document.head.appendChild(script);
    }
  }
};
</script>
回到顶部