2

看这个截图：

地图

我不明白为什么我只在左上角看到地图的一个小方块，而地图的其余部分是灰色的。我以模态形式“调用”我的地图。当我在模态表单之外“调用”我的地图时，一切正常。我正在使用那里的 Jquery Modal 表单小部件：http: //jqueryui.com/dialog/

html：

<div id='rayon_dialogue' title="Modifier le rayon de déplacement">
    <form action='profil.php' method='post'>
        <label>Rayon de déplacement maximal : </label>
        <input type='text' name='rayonDeplacement' id='rayonDeplacement' <?php echo "value='".$_SESSION['authentification']['rayonActivite']."'"; ?> /><br/>

        <label>Rayon de déplacement non chargé : </label>
        <input type='text' name='rayonCharge' id='rayonCharge' <?php echo "value='".$_SESSION['authentification']['rayonActiviteCharge']."'"; ?> /><br/><br/>

        <div id="container">
            <div id="map">
                <p>Veuillez patienter pendant le chargement de la carte...</p>
            </div>
        </div>

        <input type='submit' name='validerDeplacement' value='sauvegarder' />
    </form>
</div>

javascript：

<script>
    var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(45.893682,-74.161776),
  radius: 8000,
  color: '#FF00FF'
};

citymap['test'] = {
  center: new google.maps.LatLng(45.893682,-74.161776),
  radius: 6000,
  color: '#FFFF00'
};
var cityCircle;

function initialize() {
var latLng = new google.maps.LatLng(45.8911875,-74.16832060); // Correspond au coordonnées de Lille
var latLng2 = new google.maps.LatLng(45.903826,-74.245745); // Correspond au coordonnées de Lille

  var mapOptions = {
    zoom: 10,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN 
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);



  var marker = new google.maps.Marker({
    position : latLng,
    draggable:true,
    animation: google.maps.Animation.DROP,
    map      : map,
    title    : "Test"
    //icon     : image // Chemin de l'image du marqueur pour surcharger celui par défaut
  });

}

google.maps.event.addDomListener(window, 'load', initialize);
  </script>

模态选项：

 $("#rayon_dialogue").dialog({
      autoOpen: false,
      width:1200,
      height:650,
      draggable: false,
      resizable:false,
      closeOnEscape: true,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
4

1 回答 1

2

我相信如果您更改此调用，它会起作用：

google.maps.event.addDomListener(window, 'load', initialize);

对此（如果您使用的是 jQuery）：

$(document).ready(function() { initialize(); });

问题是地图在文档准备好之前正在初始化，所以它没有得到 的大小div，因此视口不适合它。

更新：如果这不起作用，请尝试将其添加到open对话框的事件中：

open: function() {
    initialize();
}
于 2013-10-14T17:42:53.220 回答