5***@qq.com
5***@qq.com
  • 发布:2022-12-12 15:33
  • 更新:2022-12-14 14:18
  • 阅读:270

【报Bug】vue页面通过subnvues引入的nvue子页面加载map组件,点聚合无效果

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS 12.2.1

HBuilderX类型: 正式

HBuilderX版本号: 3.6.13

手机系统: Android

手机系统版本号: Android 7.0

手机厂商: 华为

手机机型: nova

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
    <view class="container-map">  
        <map v-if="showMap" class="map" id="map" :show-location="true" :latitude="lat" :longitude="lng"  
            @markertap="markertap">  
            <!-- :markers="markers" -->  
        </map>  
    </view>  
</template>  

<script>  
    // const markerImg = '../../static/images/location.png'  
    export default {  
        props: {  
            lat: {  
                type: Number,  
                default: 22.940088,  
            },  
            lng: {  
                type: Number,  
                default: 113.341652,  
            },  
            iconPath: {  
                type: String,  
                default: '../../static/images/location.png'  
            }  
        },  
        data() {  
            return {  
                mapHeight: undefined,  
                markers: [],  
                showLocation: false,  
                // 记录当前点击的markerId  
                currentId: undefined,  
                showMap: false,  
                dataList: [{  
                    projectId: "1",  
                    name: "测试",  
                    issueDate: "2022-12-09",  
                    address: "广州",  
                    longitude: 113.340976,  
                    latitude: 22.940148,  
                }, {  
                    projectId: "1",  
                    name: "测试",  
                    issueDate: "2022-12-09",  
                    address: "广州",  
                    longitude: 113.341276,  
                    latitude: 22.939535,  
                }, {  
                    projectId: "1",  
                    name: "测试",  
                    issueDate: "2022-12-09",  
                    address: "广州",  
                    longitude: 113.341942,  
                    latitude: 22.939179,  
                }, {  
                    projectId: "1",  
                    name: "测试",  
                    issueDate: "2022-12-09",  
                    address: "广州",  
                    longitude: 113.342199,  
                    latitude: 22.94076,  
                }, {  
                    projectId: "1",  
                    name: "测试",  
                    issueDate: "2022-12-09",  
                    address: "广州",  
                    longitude: 113.341684,  
                    latitude: 22.939911,  
                }, {  
                    projectId: "1",  
                    name: "测试",  
                    issueDate: "2022-12-09",  
                    address: "广州",  
                    longitude: 113.341942,  
                    latitude: 22.939179,  
                }, {  
                    projectId: "1",  
                    name: "测试",  
                    issueDate: "2022-12-09",  
                    address: "广州",  
                    longitude: 113.342199,  
                    latitude: 22.94076,  
                }, {  
                    projectId: "1",  
                    name: "测试",  
                    issueDate: "2022-12-09",  
                    address: "广州",  
                    longitude: 113.341684,  
                    latitude: 22.939911,  
                }]  
            }  
        },  
        onReady() {  
            this.createMapContext();  
        },  
        methods: {  

            createMapContext() {  
                this.mapContext = uni.createMapContext("map", this);  
                this.mapContext.initMarkerCluster({  
                    enableDefaultStyle: true,  
                    zoomOnClick: true,  
                    gridSize: 60,  
                    complete(res) {  
                        console.log("initMarkerCluster", res)  
                    }  
                });  
                this.mapContext.on("markerClusterCreate", (e) => {  
                    console.log("markerClusterCreate", e);  
                });  
                this.mapContext.on('markerClusterClick', (res) => {})  
                this.addMarkers()  
            },  

            // 添加marker  
            addMarkers() {  
                console.log("addMarkers")  
                var markers = []  
                const marker = {  
                    id: 1,  
                    iconPath: "/static/images/location.png",  
                    width: 38,  
                    height: 38,  
                    joinCluster: true,  

                }  

                this.dataList.forEach((m, i) => {  
                    var newMarker = Object.assign({}, marker, m)  
                    newMarker.id = i + 1000  
                    // newMarker.latitude = m.latitude  
                    // newMarker.longitude = m.longitude  
                    markers.push(newMarker)  
                })  

                this.markers = [].concat(markers)  
                this.mapContext.addMarkers({  
                    markers: markers,  
                    clear: false,  
                    complete(res) {  
                        console.log('addMarkers', res)  
                    }  
                })  
                this.showMap = true  
            },  

            // marker点击事件  
            markertap(e) {  
                console.log("markertap", e)  
            },  

        }  
    }  
</script>  

<style scoped>  
    .container-map {  
        flex: 1;  
    }  

    .map {  
        width: 750rpx;  
        height: 1400rpx;  
    }  

    .bottom {  
        position: absolute;  
        bottom: 0;  
        right: 0;  
        left: 0;  
    }  
</style>  

操作步骤:

1.创建vue页面;
2.通过subnvue引入nvue页面;
3.nvue子页面使用map组件;
4.map组件使用点聚合

预期结果:

点聚合能正常显示

实际结果:

点聚合没有效果

bug描述:

vue页面通过subnvues引入的nvue子页面加载map组件,点聚合无效果,this.mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
});没有回调

2022-12-12 15:33 负责人:DCloud_Android_DQQ 分享
已邀请:
5***@qq.com

5***@qq.com (作者)

顶,有大佬知道吗

5***@qq.com

5***@qq.com (作者)

请问有人有遇到过这样的问题吗

5***@qq.com

5***@qq.com (作者)

请问有人有遇到过这样的问题吗

要回复问题请先登录注册