Question

我正在使用Kartik tabs-x和yii2-google-maps-marker。

如果标签2设置为有效，则googleMap会正确显示。

但是，如果我将标签1（而不是2）设置为活动状态，则googleMap显示不正确。

这是Tab-x。

<?php
    $datsan_tab_items = [
        [
            'label'=>'<i class="glyphicon glyphicon-calendar"></i>'.Yii::t('app', ' Tab 1'),
            'content'=> $this->render('_calendar_dat_san',['ids_sanCon' => $ids_sanCon,
                            'modelSanCon' => $modelSanCon,
                            'modelSanChu' => $modelSanChu
                        ]),
            'active'=>false
        ],
        [
            'label'=>'<i class="glyphicon glyphicon-map-marker"></i>'.Yii::t('app', ' Tab 2'),
            'content'=> $this->render('_map',['dc' => $dc, 'modelSanChu' => $modelSanChu]),
            'active'=>true,
        ],
        [
            'label'=>'<i class="glyphicon glyphicon-usd"></i>'.Yii::t('app', ' Tab 3'),
            'content'=> $this->render('_bang_gia',[
                        'modelSanCon' => $modelSanCon,
                        'modelSanChu' => $modelSanChu
                    ]),
            'active'=>false
        ],
    ];
    // Tab Chuyen doi giua Login/Register
    echo TabsX::widget([
        'items'=>$datsan_tab_items,
        'position'=>TabsX::POS_ABOVE,
        'bordered'=>true,
        'encodeLabels'=>false
    ]);
    ?>

这是地图视图。

<div class="datsan-index-thong-tin-ban-do" id="datsan-index-thong-tin-ban-do">
    <div class="panel panel-info">
        <div class="panel-heading"><?= Yii::t('app', ' Bản Đồ') ?></div> <?php
        echo GoogleMaps::widget([
            'userLocations' => [
                [
                    'location' => [
                        'address' => $dc,
                        'country' => $modelSanChu->dc_quocGia,
                    ],
                    'htmlContent' => $modelSanChu->ten
                ],
            ],
            'wrapperHeight' => '350px',
            'googleMapsUrlOptions' => [
                'key' => Yii::$app->params['GOOGLE_API_KEY'],
            ]
        ]);
        ?>
    </div>
</div>

Answer 1

如果谷歌地图位于具有div样式的display:none内，或者它的父母，或者它的父母（任何前任）都有{{1}样式，地图视图无法正确初始化。但不用担心，有一个简单的解决方法，你只需在地图上触发display:none事件即可。因此，使用javascript，切换到所需的标签后（必须在之后，所以谷歌地图div已经可见！）只需致电：

resize

您似乎使用google.maps.event.trigger(yii.googleMapManager.map, "resize");，因此您可能知道如何最好地确定何时点击标签。但是如果你不这样做，也许可以试试TabX属性。根据{{3}}，您应该可以这样做：

pluginEvents

Sam更新：将超时从10更改为200。

GoogleMaps未在非活动标签上显示（Yii2）

1 个答案: