首页 > 其他分享 >uniapp nvue页面 map地图全屏设置

uniapp nvue页面 map地图全屏设置

时间:2024-02-26 16:17:26浏览次数:18  
标签:uniapp nvue 缩放 map uni windowHeight 页面

因为

nvue页面:100vh 以及百分比不可用,

所以

1,可以获取当前屏幕高度 然后赋值

<map :latitude="latitude" :longitude="longitude" :style="'height:'+windowHeight*2+'rpx;'"></map>
const { windowWidth, windowHeight,appName } = uni.getSystemInfoSync();    

 完整代码:

<template>
    <view>
        <map style="width: 750rpx;" :style="'height:'+windowHeight*2+'rpx;'" 
            :latitude="data_info.latitude"
            :longitude="data_info.longitude" 
            >
        </map>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                windowHeight : uni.getSystemInfoSync().windowHeight,//屏幕高度
                data_info:{
                    'latitude':'34.259428',
                    'longitude':'108.947040',
                    'scale':17,//缩放级别(类型为Number,默认值为16,缩放级别取值范围为5-18)
                },
            }
        },
        methods: {
            
        }
    }
</script>

<style>

</style>

 

标签:uniapp,nvue,缩放,map,uni,windowHeight,页面
From: https://www.cnblogs.com/zhangyouwu/p/18034560

相关文章

  • uniapp-vue2-微信小程序,canvas 裁切图片的代码
    <canvasclass="edit-question-canvas"type="2d"id="canvasCuteImage"></canvas>/*.edit-question-canvas{position:absolute;left:-750rpx;width:690rpx;height:100rpx;}样式随便自己写*/......
  • SpringBoot:通过实现自定义接口获取实现类的@RequestMapping注解请求路径
    1.自定义接口//什么都不用写,就定义一个空接口publicinterfaceMyMark{}2.Controller接口类实现自定义接口@RestControllerpublicclassDayControllerimplementsMyMark{@RequestMapping("/day1")publicStringget1(){return"day1";}......
  • Java HashMap merge() 方法
    在3020.子集中元素的最大数量【力扣周赛382】用哈希表统计元素个数使用点击查看代码classSolution{publicintmaximumLength(int[]nums){Map<Long,Integer>cnt=newHashMap<>();for(intx:nums){cnt.merge((long)x,1,In......
  • Go - #70: Using mutexes inaccurately with slices and maps
      ......
  • NavigableMap.headMap()的用法
    Java中NavigableMap接口的headMap()方法用于返回此Map的一部分,其键小于(或等于,如果包含,则为true)toKey的map NavigableMap<K,V>headMap(KtoKey,booleaninclusive)参数:此函数接受两个参数:toKey:此参数指的是key。inclusive:此参数决定是否......
  • bitmap 位图 底层原理标记的字符串放在哪
    在Redis中,位图(bitmap)是通过字符串(string)类型来实现的,具体来说,位图是存储在Redis字符串中的二进制位数据。Redis字符串一般采用动态字符串实现,最大长度可以达到512MB。对于位图来说,每个二进制位代表一个状态或标记,可以表示非常多的状态信息,同时占用的存储空间很小。当使用......
  • 手写Mapper的映射文件(通用)
    <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-//mybatis.org//DTDMapper3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mappernamespace="cn.edu.neu.hello_mybat......
  • [MIT 6.S081] Lab: mmap
    Lab:mmap在本次实验中,我们要实现的是一个比较简简单的mmap实现,将文件映射到内存中的某个块,并根据权限设置这块内存的行为,以及为其提供延迟分配策略。mmap对于将文件映射到内存,其实是先规划好一块区域给文件使用,为什么要提供延迟分配,是因为如果需要映射一个文件时,就规划好一......
  • map(python中的字典?)
    目录一、什么是map二、map的创建1.直接创建2.通过make函数创建三、map的取值、改值、增值1.取值、改值、增值实例2.判断key是否存在四、forrange遍历map五、删除map中的元素六、获取map的长度七、map是引用类型八、多类型value的map1.复杂map的定义2.复杂map的......
  • Kubernetes ConfigMap挂载导致容器目录中的文件被覆盖
    容器的/apps/pero/src/resources/文件夹下有多个文件,如果挂载一个文件进去,会把其他文件都覆盖掉,只剩挂载的文件按如下修改即可volumeMounts:-name:pero-configmountPath:/apps/pero/src/resources/application.propertiessubPath:a......