GeoComplete，模态中的谷歌地图显示灰色地图，位置仅在屏幕调整大小后显示
Posted
技术标签:
【中文标题】GeoComplete，模态中的谷歌地图显示灰色地图，位置仅在屏幕调整大小后显示【英文标题】：GeoComplete, Google Map in Modal shows Grey out map, location only shows after screen resize 【发布时间】：2017-12-12 08:20:48 【问题描述】：在过去的 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">×</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&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>【问题讨论】：
【参考方案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，模态中的谷歌地图显示灰色地图，位置仅在屏幕调整大小后显示的主要内容，如果未能解决你的问题，请参考以下文章