Question

所以我正在一个网站上工作，我想在ajax调用后在模态中显示一个谷歌地图。我使用bootstrap来显示模态，问题是地图在模态打开后保持空白。

发生的奇怪事情是，当我点击Chrome上的f12以显示开发人员标签时，地图会神奇地显示，但不会以标记位置为中心。

这是我的Ajax电话：

$('.btnSeeOrder').on("click", function(){
    $("#modalSeeOrder").modal("show"); //open bootstrap modal
    var order_id = $(this).attr("data-orderId");

    $.ajax({
      type: "POST",
      url: "get_order_details.php",
      data: {
        order_id: order_id
      },
      beforeSend: function(){
        $(".order-details-modal").html("<i class='glyphicon glyphicon-refresh spinning'></i>");
      },
      success: function(data){
        $(".order-details-modal").html(data);
      },
      error: function(){
        $(".order-details-modal").html("<b>Ooops... Error....</b>");
      }
    });
  });

这是我的get_order_details.php文件：

<?php
  require '../../../app/Functions.php';
  $obj = new Admin_Functions();

  //Get order info, user info and map
  $info = $obj->getOrderInfo($_POST['order_id']);

?>

<div class="row">
  <div class="col-lg-12" style="margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #ccc;">
    <div class="row">
      <div id="map-canvas" style="width: 100%; height: 400px;"></div>

    </div>
  </div>
</div>

<script type="text/javascript">
// latitude and longitude are being loaded in from the database 
// example coords from database: 50.44444,-19.444444

var myLatlng = new google.maps.LatLng(<?php echo explode(",", $info["lat_lng"])[0]; ?>,<?php echo explode(",", $info["lat_lng"])[1]; ?>);
var mapOptions = {
  zoom: 16,
  center: myLatlng,
  styles:
  [{"featureType":"landscape","elementType":"geometry","stylers":[{"saturation":"-100"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#e9e5dc"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"color":"#545454"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"saturation":"-87"},{"lightness":"-40"},{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.fill","stylers":[{"color":"#f0f0f0"},{"saturation":"-22"},{"lightness":"-16"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"saturation":"-52"},{"hue":"#00e4ff"},{"lightness":"-16"}]}]
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  icon: 'https://www.robotevents.com/images/maps/markers/orange.png'
});
</script>

加载时这是地图的样子：

任何人都知道如何解决或解决这个问题？非常感谢任何帮助！

Answer 1

尝试在CSS类中添加它

._gmaps_cdv_{
    background-color: transparent !;
    padding: 0px !important;
}

或验证您是否为google maps attr async

添加了脚本标记

Answer 2

好的，正如一些评论所说的那样，我已经找到了解决方案。我在get_order_details.php文件后面的var marker = google....文件中添加了一些javascript代码，以便在模式打开后重绘并居中我的地图：

google.maps.event.addListenerOnce(map, 'idle', function() {
     google.maps.event.trigger(map, 'resize');

    // Recenter the map now that it's been redrawn
    var reCenter = new google.maps.LatLng(<?php echo explode(",", $info["lat_lng"])[0]; ?>,<?php echo explode(",", $info["lat_lng"])[1]; ?>);
    map.setCenter(reCenter);
  });

所以get_order_details.php里面的整个javascript看起来像这样：

<script type="text/javascript">
  //Show google map
  var myLatlng = new google.maps.LatLng(<?php echo explode(",", $info[0]["lat_lng"])[0]; ?>,<?php echo explode(",", $info[0]["lat_lng"])[1]; ?>);
  var mapOptions = {
    zoom: 16,
    center: myLatlng,
    styles:
    [{"featureType":"landscape","elementType":"geometry","stylers":[{"saturation":"-100"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#e9e5dc"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"color":"#545454"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"saturation":"-87"},{"lightness":"-40"},{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.fill","stylers":[{"color":"#f0f0f0"},{"saturation":"-22"},{"lightness":"-16"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"saturation":"-52"},{"hue":"#00e4ff"},{"lightness":"-16"}]}]
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: 'https://www.robotevents.com/images/maps/markers/orange.png'
  });

  //Redraw and center map
  google.maps.event.addListenerOnce(map, 'idle', function() {
     google.maps.event.trigger(map, 'resize');

    // Recenter the map now that it's been redrawn
    var reCenter = new google.maps.LatLng(<?php echo explode(",", $info["lat_lng"])[0]; ?>,<?php echo explode(",", $info["lat_lng"])[1]; ?>);
    map.setCenter(reCenter);
  });
</script>

Answer 3

这里你的地图没有加载，因为ajax的模仿调用部分加载地图的主要原因是在ajax调用后加载地图。
您可以使用动态加载Google Maps API google.maps.event.addDomListener（window，'load'，initialize）;

为： function initialize（）{//地图初始化代码};

在Ajax调用后在模态中显示Google Map

3 个答案: