uni-app 使用map显示当前位置和绘制一个圆圈，不显示，当前位置也不显示

<template>  
    <view>  
        <map  
         id="map1" ref="map1"  
            style="width: 100%; height: 100vh;"  
            :latitude="myLocation.latitude"  
            :longitude="myLocation.longitude"  
        ></map>  
    </view>  
</template>  

<script>  
export default {  
data() {  
            return {  
                myLocation: {  
                    latitude: 29.570189, // 纬度  
                    longitude: 106.544787 ,// 经度  
                }  
            }  
        },  
        onLoad() {  
            this.getLocation();  
        },  
        onReady:function(){  
            this.map = uni.createMapContext('map1', this);  
        },  
        methods: {  
            getLocation: function() {  
                let this_ = this;  
                uni.getLocation({  
                    geocode: true,  
                    type: 'gcj02',  
                    success: (data) => {  
                      if (data.address) {  
                            console.log('address', data);  
                            this_.myLocation = {  
                                latitude: data.latitude, // 纬度  
                                longitude: data.longitude ,// 经度  
                            };  
                        }  
                    },  
                    fail: (err) => {  
                    },  
                })  
            }  
        }  
}  
</script>

地图上就是不定位到我获取到的当前位置，显示空白。
用的Vue3 HBuilderX的版本是3.3.13.20220314