我不会说英语，抱歉犯了错误。
我正在使用 bootstrap、jquery、propeller.in 和
我有以下代码
var map, GeoMarker;
function initialize() {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions({fillColor: '#808080'});
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
map.setCenter(this.getPosition());
map.fitBounds(this.getBounds());
});
google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});
GeoMarker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
if(!navigator.geolocation) {
alert('Your browser does not support geolocation');
}<link href="https://propeller.in/assets/css/propeller.min.css" rel="stylesheet"/>
<link href="https://propeller.in/assets/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<title>Geolocation Marker Example Usage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<button data-target="#large-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Large Modal</button>
<div tabindex="-1" class="modal fade" id="large-dialog" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<div class="modal-body">
<div id="map_canvas"></div><!-- no working -->
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://propeller.in/assets/js/jquery-1.12.2.min.js"></script>
<script src="https://propeller.in/assets/js/bootstrap.min.js"></script>
<script src="https://propeller.in/assets/js/propeller.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://chadkillingsworth.github.io/geolocation-marker/geolocation-marker.js"></script>
<script>
$('#large-dialog').on('shown.bs.modal', function (e) {
initialize();
});
</script>
</html>问题是 map 无法在 div 内加载，如果我输出模态内容，它可以正常工作，我想了解如何将 map 加载到模态内，并举例说明如何使用我已经有了
最佳答案
模式打开后，您需要初始化 map ，因为 map 只会加载可见元素。
$('#large-dialog').on('shown.bs.modal', function (e) {
initialize();
});
关于javascript - 关闭模态时位置标记消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48431101/