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。

为了解决这个问题，我添加了一个数据属性＆＃39;到我的名为data-maps-initialized的地图容器中，最初设置为false。当显示带有地图输入的模态时，我触发了Google Maps初始化并将此属性设置为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 () {...行是我显示/隐藏模态时的监听器，因此在您的情况下，这只是您设置的显示/隐藏页面的内容。

请注意我并不是说这是世界上最好的做事方式，但它对我有用，我的问题和你的听起来很相似！

Google Map以多页形式显示。

1 个答案: