冬至D
冬至D
  • 发布:2022-09-02 16:00
  • 更新:2022-09-02 17:39
  • 阅读:226

【报Bug】官网的 api map 实例语法bug问题

分类:ASK社区

产品分类: 其他/ASK社区

App下载地址或H5⽹址: https://uniapp.dcloud.net.cn/api/location/map.html

示例代码:

<template>
<view class="content">
<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
</view>
</template>

<script>
const img = '/static/logo.png';

export default {
data() {
return {
latitude: 23.099994,
longitude: 113.324520,
}
},
onReady() {
this._mapContext = uni.createMapContext("map", this);

  // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})  
  this._mapContext.initMarkerCluster({  
    enableDefaultStyle: false,  
    zoomOnClick: true,  
    gridSize: 60,  
    complete(res) {  
      console.log('initMarkerCluster', res)  
    }  
  });  

  this._mapContext.on("markerClusterCreate", (e) => {  
    console.log("markerClusterCreate", e);  
  });  

  this.addMarkers();  
},  
methods: {  

  addMarkers() {  
    const marker = {  
      id: 1,  
      iconPath: img,  
      width: 50,  
      height: 50,  
      joinCluster: true, // 指定了该参数才会参与聚合  
      label: {  
        width: 50,  
        height: 30,  
        borderWidth: 1,  
        borderRadius: 10,  
        bgColor: '#ffffff'  
      }  
    };  

    const positions = [{  
      latitude: 23.099994,  
      longitude: 113.324520,  
    }, {  
      latitude: 23.099994,  
      longitude: 113.322520,  
    }, {  
      latitude: 23.099994,  
      longitude: 113.326520,  
    }, {  
      latitude: 23.096994,  
      longitude: 113.329520,  
    }]  

    const markers = []  

    positions.forEach((p, i) => {  
      const newMarker = Object.assign({},marker, p)  
      newMarker.id = i + 1  
      newMarker.label.content = `label ${i + 1}`  
      markers.push(newMarker)  
    })  
    this._mapContext.addMarkers({  
        markers,  
        clear: false,  
        complete(res) {  
          console.log('addMarkers', res)  
        }  
    })  
  }  
}  

}
</script>

<style>
.content {
flex: 1;
}

.map {
flex: 1;
}
</style>

操作步骤:

复制官网代码

预期结果:

[{
label:1
},{
label:2
},{
label:3
},{
label:4
}]

实际结果:

[{
label:4
},{
label:4
},{
label:4
},{
label:4
}]

bug描述:

官网上的实例有语法问题,
positions.forEach((p, i) => {
const newMarker = Object.assign({},marker, p)
newMarker.id = i + 1
newMarker.label.content = label ${i + 1}
markers.push(newMarker)
})
最后使用markers的话label 为最后一个值而不是i的值。下面是实际的效果

2022-09-02 16:00 负责人:无 分享
已邀请:
FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

可以换为:

positions.forEach((p, i) => {  
                    console.log(i)  
                    markers.push({  
                        latitude: p.latitude,  
                        longitude: p.longitude,  
                        id: i + 1,  
                        iconPath: img,  
                        width: 50,  
                        height: 50,  
                        joinCluster: true, // 指定了该参数才会参与聚合  
                        label: {  
                            width: 50,  
                            height: 30,  
                            borderWidth: 1,  
                            borderRadius: 10,  
                            bgColor: '#ffffff',  
                            content: i + ""  
                        }  
                    })  
                    // var newMarker = Object.assign({}, marker, p)  
                    // newMarker.id = i + 1  
                    // newMarker.label.content = i + ""  
                    // markers.push(newMarker)  
                })
  • 冬至D (作者)

    感谢您的回复,希望官网的内容能更改。

    2022-09-03 17:27

该问题目前已经被锁定, 无法添加新回复