uni-app map polyline 无效 不显示

uni-app map polyline 无效 不显示

示例代码：

this.polyline = [{
    points: this.coordinate,
    color: '#025ADD',
    width: 4,
    dottedLine: false,
}];

操作步骤：

<map style="width: 100%; height: 300px;" :scale="13" :latitude="latitude" :longitude="longitude"  
polyline="polyline">

```javascript
this.polyline = [{
    points: this.coordinate,
    color: '#025ADD',
    width: 4,
    dottedLine: false,
}];

预期结果：

  • 显示线条

实际结果：

  • 不显示绘制的线条

## bug描述：

- polyline绘制了不显示

| 信息类别       | 信息内容           |
|----------------|--------------------|
| 产品分类       | uniapp/App         |
| PC开发环境     | Windows            |
| PC开发环境版本 | win7               |
| HBuilderX类型  | 正式               |
| HBuilderX版本  | 3.1.22             |
| 手机系统       | Android            |
| 手机系统版本   | Android 11         |
| 手机厂商       | 华为               |
| 手机机型       | 华为 mate 20 pro   |
| 页面类型       | vue                |
| 打包方式       | 云端               |
| 项目创建方式   | HBuilderX          |

更多关于uni-app map polyline 无效 不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

用app-vue,app 端 polyline绘制了也不显示，同样的问题

更多关于uni-app map polyline 无效 不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


怎么解决啊

我又用.nvue格式复制一份一样的组件，然后到https://lbs.amap.com/tools/picker高德官方的拾取器里面拾取了一组坐标，结果两个都出来了

很多polyline绘制属性都用不出来，我一直在用.nvue格式在试文档上的属性

h5腾讯地图同样没效果啊，咋回事

参考https://hellouniapp.dcloud.net.cn/pages/API/map/map

问题出在polyline属性的绑定方式上。在您的代码中，polyline="polyline"使用的是静态属性赋值，这会导致Vue无法响应数据变化。

解决方案：

  1. 使用动态绑定：将polyline="polyline"改为:polyline="polyline"或v-bind:polyline="polyline"
<map style="width: 100%; height: 300px;" 
     :scale="13" 
     :latitude="latitude" 
     :longitude="longitude"  
     :polyline="polyline">
</map>
  1. 确保coordinate数据格式正确：polyline的points数组需要包含有效的经纬度坐标
// coordinate数据格式示例
this.coordinate = [
    {latitude: 39.909, longitude: 116.397},
    {latitude: 39.910, longitude: 116.398},
    {latitude: 39.911, longitude: 116.399}
];

this.polyline = [{
    points: this.coordinate,
    color: '#025ADD',
    width: 4,
    dottedLine: false
}];
回到顶部