Question

我正在使用正确的API密钥等以模态形式显示Google地图，该模型在笔记本电脑（带有Chrome的Mac）上运行良好。在此处单击将数据元素解析为img的img文件。

$(document).ready(function() {
  var map = null;
  var myMarker;
  var myLatlng;

  function initializeGMap(lat, lng) {
    myLatlng = new google.maps.LatLng(lat, lng);

    var myOptions = {
      zoom: 15,
      zoomControl: true,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    myMarker = new google.maps.Marker({
      position: myLatlng
    });
    myMarker.setMap(map);
    $('#loc').text('Lat: '+lat+', Long: '+lng);


  }

  // Re-init map before show modal
  $('#mapModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    initializeGMap(button.data('lat'), button.data('lng'));
    $("#location-map").css("width", "100%");
    $("#map_canvas").css("width", "100%");
  });

  // Trigger map resize event after modal shown
  $('#mapModal').on('shown.bs.modal', function() {
    google.maps.event.trigger(map, "resize");
    map.setCenter(myLatlng);
  });
});

它工作得很好……经纬度很长，并以相同的ID在我的标题中显示为“ loc”，重新发布到页面中。

但是，当我单击img时，在移动设备上，模态会弹出lat并正确显示长时间显示，并且在屏幕中间出现灰色/米色背景的红色小标记。... 如果再将背景拖动一点，则会弹出地图。有人遇到过这个吗？我以为显示的“调整大小”可以解决这个问题？

这是地图画布所在的模式。

       <div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Service Location</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="modal-body">
                <div class="col-md-12 modal_body_content">
                <h6 id="loc"></h6>
                </div>
                <div class="row">
                  <div class="col-md-12 modal_body_map">
                    <div class="location-map" id="location-map" >
                      <div style="width: 600px; height: 400px;" id="map_canvas"></div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 modal_body_end">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

地图在PC上以模态形式直接显示，但在移动设备上，位置以灰色背景显示，直到稍微移动一点

0 个答案: