[英]Google Map in multipage form.
我有一个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()
});
}
}
});
});
正如其他人所说,这可能是一个大小调整问题,因为在初始化地图时,地图容器的宽度和高度为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 () {...
行是我的监听器,用于显示/隐藏模态,因此在您的情况下,这就是您所拥有的设置显示/隐藏页面。
请注意,我并不是说这是做事的最佳方式,但这对我来说确实有效,而且您的问题听起来很相似!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.