uni-app 定位、校验获取详细地址、添加markers

map添加markers时需要动态添加

<template>
    <view>
        
        <map id="mapId" class="map-area" :latitude="latitude" :longitude="longitude" :markers="markers"></map>\
        
    </view>
</template>

<script>
    
    import QQMapWX from '../../libs/qqmap-wx-jssdk.js'
    
    export default {
        components:{
        },
        data(){
            return {
                latitude: 0.00,
                longitude: 0.00,
                markers:[]
            }
        },
        onLoad:function(){
            this.getSettring()      
        },
        methods: {
            getSettring(){
                let _that = this
                uni.authorize({
                    scope: 'scope.userLocation',
                    success: (res) => {
                        uni.getLocation({
                            type:'gcj02',
                            success: (res) => {
                                console.log('位置', res)
                                
                                let qqmapsdk = new QQMapWX({key: 'KOIBZ-KV36D-TFP4O-H3KFM-LD3P7-CKF2L'})
                                
                                qqmapsdk.reverseGeocoder({
                                    location: res.latitude + ',' + res.longitude,
                                    success: (res) =>{
                                        _that.longitude = res.result.location.lng
                                        _that.latitude = res.result.location.lat
                                        console.log("校验后位置", res)
                                        
                                        _that.markers = [
                                            {
                                                id:0,
                                                latitude: res.result.location.lat,
                                                longitude: res.result.location.lng,
                                                iconPath: '../../static/location.png',
                                                title:'当前位置',
                                                content: '当前位置',
                                                width: 40,
                                                height: 40
                                            }
                                        ]
                                        
                                    }
                                })
                                
                            }
                        })
                    }
                })
                
            }
        }   
    }
    
    
    
    
</script>

<style>
    
    .map-area{
        width: 100%;
        height: 500rpx;
    }
    
</style>