我在此网站上有一个嵌入Bootstrap模式的Google Map ...
http://designbyparent.co.uk/agilita
使用左侧粘性菜单中的位置图标启动模态。
我的问题是当模态启动时，地图图钉位于其包含col-md-6 div左上角的屏幕之外。
我在这里和网上的其他地方看过许多其他类似的问题，其解决方案主要包括使用map.setCenter的某些变体重置地图大小和中心，但是，这对我没有用
就好像地图正在寻找屏幕的中心而不是div。还有什么能够检测到包含div的中心吗？
以下是模态的代码......
<div id="mapModal" class="modal" data-backdrop="static" and data-keyboard="false">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<!-- Modal content -->
<div class="modal-content fadeInUpBig row">
<div class="modal-header">
<span class="close">×</span>
</div>
<div class="col-md-6">
<div class="modal-center">
<div class="menu-btn fadeInUp delay-200"><p>Agilita Ltd</p></div>
<div class="menu-btn fadeInUp delay-300"><p>Chancery LanE</p></div>
<div class="menu-btn fadeInUp delay-400"><p>London</p></div>
<div class="menu-btn fadeInUp delay-500"><p>EC4A 1BL</p></div>
</div>
</div>
<div class="col-md-6">
<div class="mapContainer" style="display:block;width:100%;height:100%;">
<style>
#map { width: 100%; height: 100%; background-color: grey; }
.map-control { display: none; }
#map .map-control { display: block; }
</style>
<div id="style-selector-control" class="map-control">
<select id="style-selector" class="selector-control">
<option value="silver">Silver</option>
</select>
</div>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 51.5143894, lng: -0.1127558};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: uluru,
scrollwheel: false,
disableDefaultUI: true
});
var iconBase = 'http://designbyparent.co.uk/agilita/wp-content/themes/shapely/assets/icons/';
var marker = new google.maps.Marker({
position: uluru,
map: map,
icon: iconBase + 'aPin.png'
});
var styleSelector = document.getElementById('style-selector');
map.setOptions({styles: styles[styleSelector.value]});
}
var styles = {
silver: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
};
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
map.setCenter(new google.maps.LatLng(51.5143894, -0.1127558));
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBoToNMoas8ad5FPpYETmBKpa-z6u1uBrE&callback=initMap">
</script>
</div>
</div>
</div><!---->
<div class="modal-footer">
<div class="bottom-menu">
<a data-toggle="modal" data-target="#contactModal" class="rotating_button">
<img src="http://designbyparent.co.uk/agilita/wp-content/themes/shapely/assets/icons/Phone_solo.svg" class="rotate_icon aw"/>
</a>
<a data-toggle="modal" data-target="#mailModal" class="rotating_button">
<img src="http://designbyparent.co.uk/agilita/wp-content/themes/shapely/assets/icons/Email_solo.svg" class="rotate_icon aw"/>
</a>
<a data-toggle="modal" data-target="#mapModal" class="rotating_button">
<img src="http://designbyparent.co.uk/agilita/wp-content/themes/shapely/assets/icons/Location_solo.svg" class="rotate_icon aw"/>
</a>
</div>
</div>
</div>
</div>