多頁形式的Google Map。

Question

我有一個multipage表格。 不同的頁面按字段集划分，您可以使用按鈕在它們之間進行導航。 在第二個字段集（例如第二個“頁面”）上，我想要一張地圖和一個搜索字段，您可以在其中輸入您的地址。

問題在於該地圖不會顯示在第二個“頁面”上。 如果我將地圖放在表單之外，則它會按預期顯示和運行。

我將HPNeo Gmaps.js用於地圖。

HTML：

<fieldset>
 <h2 class="fs-title">Foo</h2>
 <textarea id="" name="" placeholder="" rows="4" cols="50" class=""></textarea>
 <input id="" type="" name="" placeholder="" class="" />
 <textarea id="" name="" class=""></textarea>
 <input id="" type="" name="next" class="next action-button" value="Next" />
</fieldset>
 <!--Page 2-->
<fieldset>
   <h2 class="fs-title">Bar</h2>
   <label for="address">Address:</label>
   <div class="input">
   <input type="text" id="address" name="address" />
   <input type="submit" class="btn" value="Search" />
   </div>
   <div id="mapcontainer"></div>
  </fieldset>

JS：

 var map;
 $(document).ready(function () {
        map = new GMaps({
            div: '#mapcontainer',
            lat: -12.043333,
            lng: -77.028333
        });
        $('geocoding_form').submit(function (e) {
            e.preventDefault();
            GMaps.geocode({
                address: $('#address').val().trim(),
                callback: function (results, status) {
                    if (status == 'OK') {
                        var latlng = results[0].geometry.location;
                        map.setCenter(latlng.lat(), latlng.lng());
                        map.addMarker({
                            lat: latlng.lat(),
                            lng: latlng.lng()
                        });
                    }
                }
            });
        });

Answer 1

正如其他人所說，這可能是一個大小調整問題，因為在初始化地圖時，地圖容器的寬度和高度為0，因為它已被隱藏。 您可以通過等待初始化地圖直到顯示第二個“頁面”來解決這個問題（我假設您在顯示/隱藏某個地方有一些JavaScript，因此您可以附加它）或另一種方法是觸發顯示地圖調整大小事件。

對於一個我正在做的項目，我有一個類似的問題，只是該映射最初隱藏在Bootstrap模態對話框中。 與此相關的是，每次隱藏地圖並在初始化后再次顯示地圖時，我都會遇到麻煩。 同樣，這是由於以下事實：再次隱藏地圖時，地圖容器的高度和寬度再次為0。

為了解決這個問題，我在地圖容器中添加了一個名為data-maps-initialized的“數據屬性”，初始設置為false。 顯示帶有地圖的模態時，我觸發了Google Maps初始化並將此屬性設置為true。 當它被隱藏並再次顯示時，我檢查了此屬性，如果為true，則觸發了Resize事件。 這是我使用的代碼

var map;
$('#mapsModal').on('shown.bs.modal', function () {
    //if map is not initialized
    if ($('#gMapsContainer').attr('data-maps-initialized') === 'false') {
        initialize();
        $('#gMapsContainer').attr('data-maps-initialized', 'true');
    } else {
        //fire resize event
        google.maps.event.trigger(map, 'resize');

    }
});
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(50.74, -2.3),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("gMapsContainer"),
        mapOptions);
}

$('#mapsModal').on('shown.bs.modal', function () {...行是我的監聽器，用於顯示/隱藏模態，因此在您的情況下，這就是您所擁有的設置顯示/隱藏頁面。

請注意，我並不是說這是做事的最佳方式，但這對我來說確實有效，而且您的問題聽起來很相似！