[每天进步一点点~] uni-app 地图组件拖拽后点击按钮回到

效果图：

代码：

<template>
    <view class="">
        <map id="map" :style="{width: '100%', height:show?'1100rpx':'1300rpx'}" :latitude="latitude" :longitude="longitude" 
           :controls="controls" show-location @controltap="controltap"></map>
    </view>
</template>

<script>
    export default {
        data(){
            return{
                latitude: 0.00, //中心纬度
                longitude: 0.00, //中心经度
                map:{},
                controls:[
                    {
                        id:1,
                        iconPath:'/static/business/back.png',
                        position:{
                            left:15,
                            top: 35,
                            width:34,
                            height:34
                        },
                        clickable:true
                    },
                    {
                        id:2,
                        iconPath:'/static/business/back.png',
                        position:{
                            left:15,
                            top: 550,
                            width:34,
                            height:34
                        },
                        clickable:true
                    },
                ],
            }
        },
        onReady() {
             // 得到map对象,注意：引号里的map指向<map>组件的id，如果<map>组件没有加上id，就操作不了<map>组件
            this.map = uni.createMapContext("map", this);  
        },
        methods:{
            controltap(e){  // 地图控件点击
                let id = e.detail.controlId;
                if(id==1){
                    console.log('地图控件点击返回上一页');
                    uni.navigateBack(1)
                }
                if(id==2) {
                    console.log('地图控件回到原位');
                    uni.getLocation({
                      type: 'wgs84',
                      success: function (res) {
                        console.log('当前位置的经度：' + res.longitude);
                        console.log('当前位置的纬度：' + res.latitude);
                        this.longitude = res.longitude;
                        this.latitude= res.latitude;
                    }
                });
                    this.map.moveToLocation()
                }
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>