羞耻疯
羞耻疯
  • 发布:2022-10-10 18:40
  • 更新:2022-10-14 12:15
  • 阅读:236

【报Bug】uni.createMapContext在app端的.nvue文件出现报错无法运行,小程序正常

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 教育版

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

手机系统: Android

手机系统版本号: Android 11

手机厂商: 荣耀

手机机型: 荣耀v60pro

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="page-body">  
        <view class="page-section page-section-gap">  
            <map :id="mapId" :ref="mapId" show-location :style="{width: '100%',height:height}" :latitude="lat||0"  
                :longitude="lng||0">  
            </map>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        name: "myMap",  
        props: {  
            lng: String || Number,  
            lat: String || Number,  
            height: {  
                type: String,  
                default: '300px'  
            },  
            // location:{  
            //  type:Array,  
            //  default:[0,0]  
            // },  
            markers: Array,  
        },  
        data() {  
            return {  
                mapContext: null,  
                mapId: "myMap",  

            }  
        },  
        computed: {  
            realMarkers() {  

                // console.log('变化', this.markers)  
                let list = []  
                for (let index in this.markers) {  
                    let data = this.markers[index]  
                    let obj = {  
                        id: Number(data.id),  
                        latitude: data.latitude,  
                        longitude: data.longitude,  
                        title: data.title,  
                        joinCluster: true, // 指定了该参数才会参与聚合  
                        width: 25,  
                        height: 25,  
                        iconPath: "/static/img/map/projectShow.png",  
                        label: {  
                            // width: 50,  
                            //             height: 30,  
                            //             borderWidth: 1,  
                            //             borderRadius: 10,  
                            //             bgColor: '#ffffff'  
                            anchorX: -25,  
                            anchorY: 10,  
                            content: data.title,  
                            color: '#4399fc',  
                            bgColor: '#fff',  
                            padding: 5,  
                            borderRadius: 5,  
                        },  

                    }  
                    list.push(obj)  

                }  
                return list  
            }  
        },  

        mounted() {  
            this.renderMarkers()  
        },  

        methods: {  
            renderMarkers() {  
                let that = this  
                // uni.toJSON=()=>{}  
                let mapContext = uni.createMapContext(this.mapId, this)  

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

                        that.addMarkers()  
                    }  
                });  

                mapContext.on("markerClusterCreate", (res) => {  
                    console.log("创建聚合簇", res);  
                    const clusters = res.clusters  
                    const markers = clusters.map(cluster => {  
                        const {  
                            center,  
                            clusterId,  
                            markerIds  
                        } = cluster  
                        return {  
                            ...center,  
                            width: 0,  
                            height: 0,  
                            clusterId, // 必须    
                            label: {  
                                content: markerIds.length + '',  
                                fontSize: 20,  
                                width: 50,  
                                height: 50,  
                                bgColor: '#fff',  
                                borderRadius: 50,  
                                textAlign: 'center',  
                                anchorX: 0,  
                                anchorY: 0,  
                            }  
                        }  
                    })  
                    mapContext.addMarkers({  
                        markers,  
                        clear: false,  
                        complete(res) {  
                            console.log('clusterCreate addMarkers', res)  
                        }  
                    })  
                });  
            },  
            addMarkers() {  
                if (this.mapContext && this.realMarkers.length > 1) {  
                    this.mapContext.moveToLocation()  
                }  
                this.mapContext.addMarkers({  
                    markers: this.realMarkers,  

                    clear: false,  
                    complete(res) {  
                        console.log('addMarkers', res)  
                    }  
                })  
            }  
        },  
    }  
</script>  

<style>  

</style>  

操作步骤:

贴以上代码

预期结果:

app端与小程序一样运行正常

实际结果:

小程序运行正常,app端报错,并且未显示marker或聚合

bug描述:

小程序一切正常,在app运行出现[Vue warn]: Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.报错

2022-10-10 18:40 负责人:无 分享
已邀请:
羞耻疯

羞耻疯 (作者)

。。将代码从nvue组件直接搬到nvue页面就能显示了

羞耻疯

羞耻疯 (作者)

试了一下地图中的一些属性,标记差异中有app-nvue的好像必须是页面nvue才行,比如label的color之类的,直接建个nvue文件没有效果

DCloud_UNI_WZF

DCloud_UNI_WZF

您那边稳定复现吗,我这边出现过一次,后来无法复现了

  • 羞耻疯 (作者)

    这段我10号调了一下午都是这样的,第二天换成页面nvue文件实现了功能

    2022-10-24 15:25

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