哈哈哈888
哈哈哈888
  • 发布:2023-01-30 10:35
  • 更新:2023-12-26 19:10
  • 阅读:1682

app中用nvue动态自定义customCallout不显示,不使用自定义的callout正常显示

分类:nvue
已邀请:

最佳回复

DCloud

DCloud

HBuilderX 3.7.1.20230210-alpha 已修复。

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

使用下面的代码验证下是否正常,另外:使用bug反馈模板反馈以提供更多信息

<template>  
  <view class="content">  
    <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"  
      :latitude="location.latitude" :show-location="showLocation" :rotate="rotate" :skew="skew" show-scale="true"  
      :markers="markers" enable-building=true enable-indoorMap="true" @callouttap="oncallouttap">  
      <cover-view slot="callout">  
        <cover-view marker-id="1">  
          <cover-image class="icon" src="/static/logo.png"></cover-image>  
          <cover-view class="test">  
            customCallout  
          </cover-view>  
        </cover-view>  
      </cover-view>  
    </map>  
  </view>  
</template>  

<script>  
  const testMarkers = [{  
    id: 1,  
    latitude: 39.9086920000,  
    longitude: 116.3974770000,  
    title: '天安门',  
    zIndex: '1',  
    iconPath: '/static/gif.gif',  
    width: 40,  
    height: 40,  
    anchor: {  
      x: 0.5,  
      y: 1  
    },  
    callout: {  
      content: '首都北京\n天安门',  
      color: '#00BFFF',  
      fontSize: 12,  
      borderRadius: 2,  
      borderWidth: 0,  
      borderColor: '#333300',  
      bgColor: '#CCFF11',  
      padding: '1',  
      display: 'ALWAYS'  
    },  
    customCallout: {  
      anchorY: 0,  
      anchorX: 0,  
      display: 'ALWAYS'  
    }  
  }];  

  export default {  
    data() {  
      return {  
        location: {  
          longitude: 116.3974770000,  
          latitude: 39.9086920000  
        },  
        controls: [{  
          id: 1,  
          position: {  
            left: 5,  
            top: 180,  
            width: 30,  
            height: 30  
          },  
          iconPath: '/static/logo.png',  
          clickable: true  
        }],  
        showLocation: false,  
        scale: 13,  
        enableZoom: true,  
        polyline: [],  
        markers: testMarkers,  
        polygons: [],  
        circles: [],  
        includePoints: [],  
        rotate: 0,  
        skew: 0  
      }  
    },  
    methods: {  
      oncallouttap(e) {  
        uni.showModal({  
          content: JSON.stringify(e)  
        })  
      }  
    }  
  }  
</script>  

<style>  
  .content {  
    flex: 1;  
  }  

  .map {  
    width: 750rpx;  
    height: 250px;  
    background-color: #f0f0f0;  
  }  

  .icon {  
    width: 20px;  
    height: 20px;  
  }  

  .scrollview {  
    flex: 1;  
    padding: 10px;  
  }  

  .list-item {  
    flex-direction: row;  
    flex-wrap: nowrap;  
    align-items: center;  
    padding: 5px 0px;  
  }  

  .list-text {  
    flex: 1;  
  }  

  .button {  
    margin-top: 5px;  
    margin-bottom: 5px;  
  }  
</style>  
1***@qq.com

1***@qq.com

求求了,快点修复吧

红A

红A - 前端

终于确认这个bug了。
我现在需求是移动地图需要动态渲染当前中心点附近的物品等,这v-if强制刷新体验是真差

[已删除]

[已删除]

哈哈,之前使用的时候是this.markers = this.markers.slice(0)..这样弄的,才能刷新

5***@qq.com

5***@qq.com

我用nvue直接显示效果跟vue一样,气泡这种直接不显示了,除了再nvue文件内开发还需要做什么额外的配置吗

QCW

QCW

新版本 3.7.3.20230223 说更新解决了这个问题 感觉还是没有解决
更新过后include-points 这个参数 不起作用了 上个版本是有作用的

r***@163.com

r***@163.com - renkai721

自定义弹出框的教程,看下面的文章。
https://blog.csdn.net/renkai721/article/details/135228467

真不知道hbuilder养了一堆什么逼玩意,封装的弹出框。直接给你一个html,你显示都不会。

要回复问题请先登录注册