uni-app nvue 地图使用 include-points 视野无法包含所有 marker

uni-app nvue 地图使用 include-points 视野无法包含所有 marker

示例代码：

    <map id="amap" v-if="covers.length>0" :style="{ 'width':'100%','height': windowHeight }" :latitude="latitude" :longitude="longitude" :markers="covers" :include-points="covers"  @markertap="onSelectMapClick"></map>  
```

### 操作步骤：
nvue 在使用地图时需要自适应所有marker视野，使用:include-points视野无法包含所有marker，marker被遮挡在两边，视野不准确，无法像vue那样设置padding  

### 预期结果：
使用:include-points能包含所有marker,并可以设定边距padding

### 实际结果：
使用:include-points视野无法包含所有marker

### bug描述：
nvue 在使用地图时需要自适应所有marker视野，使用:include-points视野无法包含所有marker，marker被遮挡在两边，视野不准确，无法像vue那样设置padding
mapCtx.includePoints({
padding: ['50','50','60','50'],
points: this.covers
})

![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220518/eada68cc01661166eb6d0d56a04cd437.png)
![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220518/1c86182e85ebeb3689fa61ff144ffd8d.png)

### 相关链接：
- [Link](https://ask.dcloud.net.cn/question/152924)

更多关于uni-app nvue 地图使用 include-points 视野无法包含所有 marker的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

您发个完整的复现demo，我测试一下。

更多关于uni-app nvue 地图使用 include-points 视野无法包含所有 marker的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题 Android和iOS都存在，要处理下啊

解决了么 解决了么 我也遇到了

为什么我的点都不显示？视图都没移过去。

bug
bug
bug
bug

请提供可复现bug的最小化demo（上传附件），让我们及时定位问题，及时修复。【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

同问

哎 还是不行

在 uni-app 中使用 nvue 开发地图时，include-points 属性用于设置地图的视野范围，使其包含指定的所有点。然而，有时候你可能会遇到 include-points 无法包含所有 marker 的问题。以下是一些可能的原因和解决方案：

1. 确保 include-points 包含所有 marker 的坐标

首先，确保 include-points 数组中的点包含了所有 marker 的经纬度坐标。你可以通过遍历 marker 数组，将所有 marker 的坐标添加到 include-points 中。

markers: [
  { id: 1, latitude: 39.90403, longitude: 116.407526 },
  { id: 2, latitude: 31.23039, longitude: 121.473701 },
  // 其他 marker
],

includePoints: this.markers.map(marker => ({
  latitude: marker.latitude,
  longitude: marker.longitude
}))

2. 检查 marker 的坐标是否有效

确保所有 marker 的经纬度坐标是有效的。无效的坐标可能会导致地图视野计算错误。

3. 使用 region 属性

如果 include-points 无法满足需求，可以尝试使用 region 属性来手动设置地图的视野范围。region 属性允许你指定地图的中心点和缩放级别。

region: {
  latitude: 35.0, // 中心点纬度
  longitude: 110.0, // 中心点经度
  scale: 10 // 缩放级别
}

你可以通过计算所有 marker 的中心点和合适的缩放级别来设置 region。

4. 动态调整视野

如果 marker 是动态添加的，确保在添加 marker 后重新计算并设置 include-points 或 region。

this.markers.push(newMarker);
this.includePoints = this.markers.map(marker => ({
  latitude: marker.latitude,
  longitude: marker.longitude
}));

5. 使用 mapContext 的 includePoints 方法

如果你使用的是 mapContext，可以调用 includePoints 方法来动态调整地图视野。

const mapContext = uni.createMapContext('myMap');
mapContext.includePoints({
  points: this.markers.map(marker => ({
    latitude: marker.latitude,
    longitude: marker.longitude
  })),
  padding: [20, 20, 20, 20] // 可选，设置内边距
});

6. 检查地图组件的版本和兼容性

确保你使用的 uni-app 和 nvue 版本是最新的，并且地图组件的 API 是兼容的。某些旧版本可能存在 bug 或功能限制。

7. 调试和日志

在开发过程中，可以通过打印日志来检查 include-points 和 marker 的坐标是否正确，以及地图视野是否按预期调整。

console.log('includePoints:', this.includePoints);
console.log('markers:', this.markers);
回到顶部