5***@qq.com
5***@qq.com
  • 发布:2021-03-23 18:02
  • 更新:2021-08-04 15:02
  • 阅读:1281

uniapp map app polygons 不显示

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.1.6

手机系统: Android

手机系统版本号: Android 10

手机厂商: 三星

手机机型: s20

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template> <view> <view class="fixed"> <cu-custom :isBack="true" bgColor="bg-shadeTop text-white"> <block slot="backText">返回</block> <block slot="content">小区列表</block> </cu-custom> </view> <view ref="showMap" :style="height"> <map id="map" style="width: 100%; height: 500px;" :latitude="latitude" :longitude="longitude" :markers="obj" polygons="polylines"></map> </view>
<view
style="width: 100%;height: 60rpx;background-color: #f0f0f0;display: flex;justify-content: center;border-bottom: #c5c4c8 5rpx solid;">
<image style="width: 10px;height: 15px;" src="../../static/showMore.png" mode="aspectFill"></image>
</view>
<view style="background-color: #f0f0f0;">
<view class="VerticalBox">
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
style="height:calc(100vh - 375upx)">
<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" key="index" @tap="TabSelect" :data-id="index"> {{item.xqmc}}
</view>
</scroll-view>
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx);" scroll-into-view="''+mainCur"> <view class="padding-top padding-lr" style="background: #f0f0f0;" v-for="(item,index) in list"

key="index" :id="''+index" @click="tz(item.id)"> <view class="cu-bar solid-bottom bg-white">
<view class="action">
<text class="cuIcon-title text-green"></text> {{item.xqmc}}
<!-- <text style="font-size: smaller; margin-left: 15rpx;">{{item.wgzxm}}</text>
<text style="font-size: smaller;margin-left: 10rpx;">{{item.sjhm}}</text> -->
</view>
</view>

            </view>  
        </scroll-view>  
    </view>  
</view>  

</view>
</template>

<script>
import {get,post} from '@/utils/request'
import cqszUtils from '@/utils/cqszUtils'
export default {
data() {
return {
height: 'height: 500px;',
id: '',
list: [],
tabCur: 0,
mainCur: 0,
verticalNavTop: 0,
load: true,
latitude: 30.93922,
longitude: 108.717751,
obj: [{
latitude: 30.93922,
longitude: 108.717751,
iconPath: '../../../static/location.png'
}],
isShow: true,
polylines: [{
points: [
{
latitude: 30.939483,
longitude: 108.714216
},
{
latitude: 30.942133,
longitude: 108.717692
},
{
latitude: 30.941875,
longitude: 108.723185
},
{
latitude: 30.939409,
longitude: 108.722499
},
{
latitude: 30.939483,
longitude: 108.714216
},
],
strokeColor: "#FD302F",
strokeWidth: 2,
fillColor: "#FD302F4C",
zIndex: 100,
}]
};
},
onLoad(e) {

    },  
    onReady() {  
        uni.hideLoading()  
        this.polylines=[{  
                points: [  
                    {  
                        "latitude": 30.939483,  
                        "longitude": 108.714216  
                    },  
                    {  
                        "latitude": 30.942133,  
                        "longitude": 108.717692  
                    },  
                    {  
                        "latitude": 30.941875,  
                        "longitude": 108.723185  
                    },  
                    {  
                        "latitude": 30.939409,  
                        "longitude": 108.722499  
                    },  
                    {  
                        "latitude": 30.939483,  
                        "longitude": 108.714216  
                    },  
                ],  
                strokeColor: "#FD302F",  
                strokeWidth: 2,  
                fillColor: "#FD302F4C",  
                zIndex: 999999999,  
            }]   
    },  
    methods: {  

        TabSelect(e) {  
            this.tabCur = e.currentTarget.dataset.id;  
            this.mainCur = e.currentTarget.dataset.id;  
            this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 25  
        },  
        // VerticalMain(e) {  
        //  // #ifdef MP-ALIPAY  
        //  return false //支付宝小程序暂时不支持双向联动   
        //  // #endif  
        //  let that = this;  
        //  let tabHeight = 0;  
        //  if (this.load) {  
        //      for (let i = 0; i < this.list.length; i++) {  
        //          let view = uni.createSelectorQuery().select("#" + this.list[i].id);  
        //          view.fields({  
        //              size: true  
        //          }, data => {  
        //              this.list[i].top = tabHeight;  
        //              tabHeight = tabHeight + data.height;  
        //              this.list[i].bottom = tabHeight;  
        //          }).exec();  
        //      }  
        //      this.load = false  
        //  }  
        //  let scrollTop = e.detail.scrollTop;  
        //  for (let i = 0; i < this.list.length; i++) {  
        //      if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {  
        //          this.verticalNavTop = (this.list[i].id - 1) * 25   
        //          this.tabCur = this.list[i].id  
        //          console.log(scrollTop)  
        //          return false  
        //      }  
        //  }  
        // }  
    },  
}  

</script>

<style>
.fixed {
position: fixed;
z-index: 99;
}

.VerticalNav.nav {  
    width: 250upx;  
    white-space: initial;  
}  

.VerticalNav.nav .cu-item {  
    width: 100%;  
    text-align: center;  
    background-color: #fff;  
    margin: 0;  
    border: none;  
    height: 50px;  
    position: relative;  
}  

.VerticalNav.nav .cu-item.cur {  
    background-color: #f1f1f1;  
}  

.VerticalNav.nav .cu-item.cur::after {  
    content: "";  
    width: 8upx;  
    height: 30upx;  
    border-radius: 10upx 0 0 10upx;  
    position: absolute;  
    background-color: currentColor;  
    top: 0;  
    right: 0upx;  
    bottom: 0;  
    margin: auto;  
}  

.VerticalBox {  
    display: flex;  
}  

.VerticalMain {  
    background-color: #f1f1f1;  
    flex: 1;  
}  

</style>

操作步骤:

微信小程序可以显示多边形 app端不能显示多边形

预期结果:

app端可以显示多边形

实际结果:

微信小程序可以显示多边形 app端不能显示多边形

bug描述:

uniapp app端 map polygons 不显示 但是微信小程序上面可以显示

2021-03-23 18:02 负责人:无 分享
已邀请:
四季三餐

四季三餐

app nvue 2.1.5 +说显示,用nvue 做依旧不显示哎

该问题目前已经被锁定, 无法添加新回复