入门案例

<!--
* @Author: 田琪
* @Date: 2022-05-20 10:55:34
* @FilePath: /pages/index/index.nvue
* @Description: In User Settings Edit
-->
<template>
    <view>
        <map class="map"
            id="map"
            :latitude="latitude"
            :longitude="longitude" 
            :style="{height: mapHeight + 'px'}">
        </map>
        <view class="mapCover" @click="check">
            <text>都是否定的否定</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                mapHeight: 0,
                latitude: 39.909,
                longitude: 116.39742,
            }
        },
        onLoad(){
            uni.getSystemInfo({
                success: res => {
                    console.log(res);
                    this.mapHeight = res.screenHeight;
                    console.log(this.mapHeight);
                }
            })
        },
        methods: {
            /***
            * @description: 
            * @param {*}
            * @return {*}
            * @author: 田琪
            */
            go(url){
                uni.navigateTo({
                    url:url
                })
            },
            check(){
                const filePicker = uni.requireNativePlugin('TqFilePicker');
                console.log(filePicker);
                let count = 5;
                filePicker.openFilePicker(count,res => {
                    console.log(res);
                    uni.showToast({
                        title:"成功"+JSON.stringify(res),
                        icon:"none"
                    })
                })
            }
        }
    }
</script>

<style>
    .map {
        width: 750rpx;
    }
    .mapCover{
        width: 690rpx;
        height: 254rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        position: absolute;
        bottom: 28rpx;
        left: 375rpx;
        margin-left: -345rpx;
        padding: 32rpx 18rpx;
    }
</style>