Question

过去5个小时我一直试图解决这个问题：

我有GeoComplete JQuery插件，我已经将搜索字段和地图包含在一个boostrap模式中，不幸的是地图没有显示，以及它在我调整屏幕大小后的唯一显示，这是一个已知问题，而且我的威胁是被问到但没有明确解决（有代码，因为我有）我非常感谢你的帮助！

示例代码（请将所有代码复制到index.html文件中）

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css" media="screen">
      .map_canvas { float: left; }
      form { width: 300px; float: left; }
      fieldset { width: 320px; margin-top: 20px}
      fieldset label { display: block; margin: 0.5em 0 0em; }
      fieldset input { width: 95%; }
	  #examples a {
  text-decoration: underline;
}

#geocomplete { width: 200px}

.map_canvas { 
  width: 100%; 
  height: 400px; 
  margin: 10px 20px 10px 0;
}

#multiple li { 
  cursor: pointer; 
  text-decoration: underline; 
}
.pac-container {
            z-index: 10000 !important;
        }

            .pac-container:after {
                background-image: none !important;
                height: 0px;
            }
        .map_canvas {
            float: left;
            z-index: 10000 !important;
        }

        .pac-container {
            background-color: #FFF;
            z-index: 20;
            position: fixed;
            display: inline-block;
            float: left;
        }

        .modal {
            z-index: 20;
        }

        .modal-backdrop {
            z-index: 10;
        }

    </style>
</head>
<body>

<!-- Trigger the modal with a button -->



<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Google Search Map </h4><h6>(Map only shows after you reseize the browser page and back) nb: Don't forget to refresh input field's value</h6>
      </div>
      <div class="modal-body">
	  
	  <div class="form-group">
  <label for="usr">Search:</label>
 
 <input id="geocomplete" class="form-control" type="text" placeholder="Type in an address" value="London, United Kingdom" />
  <small>I have added the value (you can change it if you wish</small>
</div>

        <div class="map_canvas"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<div class="container">
  <h3>Modal button below</h3> <hr> <p></p>  <p></p>  <p></p>  <p></p>
<button type="button" class="btn btn-danger btn-xl" data-toggle="modal" data-target="#myModal">Open Google Map Modal</button>
    
</div>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>

    <script>
      $(function(){
        $("#geocomplete").geocomplete({
          map: ".map_canvas",
          details: "form",
          types: ["geocode", "establishment"],
        });

        $("#find").click(function(){
          $("#geocomplete").trigger("geocode");
        });
      });
    </script>


</body>
</html>

Answer 1

<强> SOLUTION

$(function(){
    $("#geocomplete").geocomplete({
        componentRestrictions: { country: 'ZA' },
        map: ".map_canvas",
        details: "form",
        types: ["geocode", "establishment"],
    })
    .bind("geocode:result", function(event, result){
        var map = $("#geocomplete").geocomplete('map');
        google.maps.event.trigger(map, "resize");
        map.setCenter(result.geometry.location);
    });
});

GeoComplete，Modal中的Google Map显示灰色地图，位置仅在屏幕调整大小后显示

1 个答案: