胜天半子祁厅长
胜天半子祁厅长
  • 发布:2023-03-07 04:50
  • 更新:2024-03-04 10:57
  • 阅读:401

【报Bug】map组件translateMarker报错:failTypeError: Cannot read property 'spherical' of undefined

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11 家庭中文版 22621.1265

HBuilderX类型: 正式

HBuilderX版本号: 3.7.3

浏览器平台: Edge

浏览器版本: 110.0.1587.63 (正式版本) (64 位)

项目创建方式: HBuilderX

示例代码:

组件代码

        <uni-popup ref="mapPopup" type="center">  
            <view class="map-box">  
                <view>xxx</view>  
                <map ref="pointMap" id="pointMap" style="width: 300px; height: 400px;" :latitude="39.909" :longitude="116.39742"  
                    :markers="mapCenterMarkers" @regionchange="updatedMap" @markertap="tapMarker"></map>  
            </view>  
        </uni-popup>  
// JS 代码  
data() {  
    return {  
                                mapCenterMarkers: [{  
                    longitude: 116.39, latitude: 39.90,  
                    id: 1,  
                    iconPath: '/static/location.png'  
                }]  
    }  
}

popup 打开时初始化 mapContext

            openMapPopup() {  
                this.$refs.mapPopup.open()  
                this.$nextTick(() => {  
                    if (!mapContext) {  
                        mapContext = uni.createMapContext('pointMap', this)  
                    }  
                })  
            },

地图移动时更新 marker 位置

            updatedMap(e) {  
                if (e.type == 'begin') {  
                    return console.log('begin updated', e)  
                }  
                console.log('updated map', e)  
                if (!e.detail.centerLocation) {  
                    return console.warn('noCenterLocation', e.detail)  
                }  

                let {longitude, latitude} = e.detail.centerLocation  
                console.log('prepare update markers', longitude, latitude)  
                mapContext.translateMarker({  
                    markerId: 1,  
                    destination: {  
                        latitude: 39.9365,  
                        longitude: 116.389  
                    },  
                    autoRotate: false,  
                    rotate: 0,  
                    animationEnd: e => console.log('translateMarker animationEnd', e),  
                    success: e => console.log('translateMarker success', e),  
                    fail: e => console.log('translateMarker fail', e),  
                    complete: e => console.log('translateMarker complete', e)  
                })  
                mapContext.getCenterLocation({  
                    success: e => console.log('getCenterLocation', e)  
                })  
                console.log('this center markers')  
            },

操作步骤:

1、使用 map 组件加载 marker 数据,map 已设置 ref、id 属性 'pointMap'
2、地图打开时使用 uni.createMapContext 创建引用对象
3、地图使用时获取当前地图中心经纬度并调用 translateMarker 移动 marker 到最新地图中心经纬度
4、控制台报错:

translateMarker fail [object] {"errMsg":"translateMarker:failTypeError: Cannot read property 'spherical' of undefined"}

创建新空白的默认项目也能复现,完整代码如下

<template>  
    <view class="content">  
        <uni-popup ref="mapPopup" type="center">  
            <view class="map-box">  
                <view>xxx标题</view>  
                <map ref="pointMap" id="pointMap" style="width: 300px; height: 400px;" :latitude="39.909" :longitude="116.39742"  
                    :markers="mapCenterMarkers" @regionchange="updatedMap"></map>  
            </view>  
        </uni-popup>  
    </view>  
</template>  

<script>  
    let mapContext = null   
    export default {  
        data() {  
            return {  
                mapCenterMarkers: [{  
                    longitude: 116.39, latitude: 39.90,  
                    id: 1,  
                    iconPath: '/static/location.png'  
                }]  
            }  
        },  
        onLoad() {  
            this.$nextTick(() => this.openMapPopup())  
        },  
        methods: {  
            openMapPopup() {  
                this.$refs.mapPopup.open()  
                this.$nextTick(() => {  
                    if (!mapContext) {  
                        mapContext = uni.createMapContext('pointMap', this)  
                    }  
                })  
            },  
            closeMapPopup() {  
                this.$refs.mapPopup.close()  
            },  
            updatedMap(e) {  
                if (e.type == 'begin') {  
                    return console.log('begin updated', e)  
                }  
                console.log('updated map', e)  
                if (!e.detail.centerLocation) {  
                    return console.warn('noCenterLocation', e.detail)  
                }  
                let {longitude, latitude} = e.detail.centerLocation  
                console.log('prepare update markers', longitude, latitude)  
                mapContext.translateMarker({  
                    markerId: 1,  
                    destination: {  
                        latitude: 39.9365,  
                        longitude: 116.389  
                    },  
                    autoRotate: false,  
                    rotate: 0,  
                    animationEnd: e => console.log('translateMarker animationEnd', e),  
                    success: e => console.log('translateMarker success', e),  
                    fail: e => {  
                        console.log('translateMarker fail', e)  
                    },  
                    complete: e => console.log('translateMarker complete', e)  
                })  
                mapContext.getCenterLocation({  
                    success: e => console.log('getCenterLocation', e)  
                })  
            },  
        }  
    }  
</script>

预期结果:

预期能移动 marker 到最新位置

实际结果:

marker 位置没变化,控制台报错

translateMarker fail [object] {"errMsg":"translateMarker:failTypeError: Cannot read property 'spherical' of undefined"}

bug描述:

1、使用 map 组件加载 marker 数据,map 已设置 ref、id 属性 'pointMap'
2、地图打开时使用 uni.createMapContext 创建引用对象
3、地图使用时获取当前地图中心经纬度并调用 translateMarker 移动 marker 到最新地图中心经纬度
4、控制台报错:

translateMarker fail [object] {"errMsg":"translateMarker:failTypeError: Cannot read property 'spherical' of undefined"}
2023-03-07 04:50 负责人:无 分享
已邀请:
胜天半子祁厅长

胜天半子祁厅长 (作者) - 90后IT,阿里云 MVP 专家

唉,太坑了,折腾了好几天总算解决了

  • 5***@qq.com

    问下怎么解决的

    2023-03-21 16:10

  • 7***@qq.com

    出现同样的问题,是怎么解决的啊

    2023-04-18 15:16

  • 胜天半子祁厅长 (作者)

    回复 7***@qq.com: 好像是高德、腾讯地图有差异,换了另外一个就好了

    2023-04-19 20:03

  • 胜天半子祁厅长 (作者)

    回复 5***@qq.com: 好像是高德、腾讯地图有差异,换了另外一个就好了

    2023-04-19 20:03

1***@qq.com

1***@qq.com

请问是需要安装腾讯地图sdk吗

lihailan

lihailan - xue

咋解决的,高德和腾讯 都没啥用

要回复问题请先登录注册