首先抱歉我的英文
我在模式中使用调整大小的API Google Map时出现了一些问题，我已经检查了几个帖子，我们必须放置＆＃34; google.maps.event.trigger（{map}，＆＃39;调整大小＆ ＃39;）;＆＃34;避免灰屏
但是对我而言，它确实工作我一直都是灰色的屏幕，所以这就是我的请求你的帮助
我想把我的代码放在jsfiddle上但我犯了小错误，所以我放在这里
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= "anonymous" > <!-- Optional theme -->
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity= "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin= "anonymous" > <!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity= "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin= "anonymous" ></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkWExAooGaEJGyNuOhaUb6Z-OGDxvgnxM&libraries=places&callback=initMap"
async defer>
</script>
<style>
.pac-container {
z-index: 1051 !important;
}
#map {
width:auto;
height:480px;
overflow:visible;
display: block;
}
.modal-dialog {
position: relative;
width: auto;
margin: 60px auto;
max-width: 1000px;
/*z-index: 1500;*/
}
</style>
<!-- Modal j'achete je loue-->
<div class="modal fade" id="myModalMap" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">J'achete, je loue</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="well">
<div id="divTopRigth" class="text-right"></div>
<h1 id="TitleHistorique" class="text-center">Trouver un point de vente</h1>
<div id="locationField">
<input id="autocomplete" class="form-control" placeholder="Entrer une rue" type="text" />
</div>
<br>
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="openmap">open map</button>
<script>
$("#openmap").on('click',function(){
ShowModalMap();
});
function ShowModalMap(){
$('#myModalMap').appendTo("body").modal("show");
//initMap();
}
</script>
<script>
//google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());
</script>
<script>
var placeSearch, autocomplete;
var src = 'http://149.202.171.217/cerp/V11/wp-content/themes/nouveau/FunctionAdd/test.kml';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.8503, lng: 4.3517},
zoom:7
});
google.maps.event.trigger(map, 'resize');
var input = /** @type {!HTMLInputElement} */(document.getElementById('autocomplete'));
loadKmlLayer(src, map);
var options = {
componentRestrictions: {country: "be"}
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
map.setZoom(14);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);
}
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
map.zoom(13);
}, function() {
});
} else {
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
map: map
});
}
}
</script>
提前致谢
答案 0 :(得分：1)
使用此：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
var placeSearch, autocomplete;
var src = 'http://149.202.171.217/cerp/V11/wp-content/themes/nouveau/FunctionAdd/test.kml';
$(document).ready(function () {
$("#openmap").on('click', function () {
ShowModalMap();
});
function ShowModalMap() {
//alert(1);
$('#myModalMap').appendTo("body");
$('#myModalMap').modal("show");
initMap();
}
$('#myModalMap').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
});
});
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 50.8503, lng: 4.3517 },
zoom: 7
});
loadKmlLayer(src, map);
//var resize = new google.maps.event.trigger(map, 'resize');
var input = (document.getElementById('autocomplete'));
var options = {
componentRestrictions: { country: "be" }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
map.setZoom(14);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);
}
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var infoWindow = new google.maps.InfoWindow({
content: '',
maxWidth: 400
});
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
map.setZoom(13);
}, function () {
});
} else {
}
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
//setTimeout(function () {
// loadKmlLayer(src, map);
//}, 10000);
//}
//google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());
</script>
<style>
.pac-container {
z-index: 1051 !important;
}
#map {
width: auto;
height: 480px;
overflow: visible;
display: block;
}
.modal-dialog {
position: relative;
width: auto;
margin: 60px auto;
max-width: 1000px;
/*z-index: 1500;*/
}
</style>
</head>
<body>
<!-- Modal j'achete je loue-->
<div class="modal fade" id="myModalMap" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">J'achete, je loue</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="well">
<div id="divTopRigth" class="text-right"></div>
<h1 id="TitleHistorique" class="text-center">Trouver un point de vente</h1>
<div id="locationField">
<input id="autocomplete" class="form-control" placeholder="Entrer une rue" type="text" />
</div>
<br>
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="openmap">open map</button>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkWExAooGaEJGyNuOhaUb6Z-OGDxvgnxM&libraries=places&callback=initMap" async defer></script>
</body>
</html>