对不起我的英文,我有以下代码
我使用 bootstrap , jquery , propeller.in 和
地理定位仅在我第一次打开模态时才起作用,如果我关闭并再次打开它只是不起作用
有趣的是,如果我更改浏览器选项卡并返回它有效,我在linux上使用chrome
关于问题的gif
我的代码
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');
}
$('#large-dialog').on('shown.bs.modal', function(e) {
initialize();
});

html,
body,
#map_canvas {
margin: 0;
padding: 0;
height: 300px;
width: 300px
}

<link href="https://propeller.in/assets/css/propeller.min.css" rel="stylesheet" />
<link href="https://propeller.in/assets/css/bootstrap.min.css" rel="stylesheet" />
<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>
<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>
&#13;