我想在我的bootstrap模式中创建谷歌地图。我的数据库中有LAT和LNG，我想基于这个值为我数据库中的每个商店创建带谷歌地图的bootstrap模态。看来我有问题，但我不知道在哪里。我只获得了我的模态中的一部分地图，即使LAT和LNG不同，所有地图都是相同的。这是我在此的头一篇博文。提前谢谢。
<!DOCTYPE html>
<?php include ('includes/connect.php'); ?>
<html>
<head>
<title>Contact Page with Single Map Modal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
body { padding: 10px; background-color:#CCC }
.map { height: 450px }
</style>
</head>
<body>
<?php
//getting results from database
$query = "SELECT * FROM store";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) { ?>
//When user clicks on this link it should opet bootstrap modal with google map inside
<div class="container">
<div class="row">
<p><a href="#" data-target="<?php echo "#modalmap".$row['ID_STORE'];?>" data-Toggle="modal"><?php echo $row['NAME'];?></a></p>
</div>
<!-- /row -->
<!-- Creating dynamic id for moral and dynamic id for bootstrap modal body -->
<?php $idmodal = "modalmap".$row['ID_STORE'];
$mapcontainer = "mapcontainer".$row['ID_STORE']; ?>
<!-- Modal -->
<div class="modal fade" id="<?php echo $idmodal; ?>">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><?php echo $row['NAME'];?></h4>
</div>
<div class="modal-body">
<div id="<?php echo $mapcontainer; ?>" class="map"></p></div>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div><!-- /container -->
<?php
/* Getting LAT and LNG from database */
$lat = $row['LAT'];
$lng = $row['LNG'];
?>
<script>
var lat = <?php echo $lat; ?>;
var lng = <?php echo $lng; ?>;
var var_map;
var var_location = new google.maps.LatLng(lat,lng);
function map_init() {
var var_mapoptions = {
center: var_location,
zoom: 14,
mapTypeControl: false,
panControl:false,
rotateControl:false,
streetViewControl: false,
};
var_map = new google.maps.Map(document.getElementById("<?php echo $mapcontainer; ?>"),
var_mapoptions);
}
google.maps.event.addDomListener(window, 'load', map_init);
//start of modal google map
$("<?php echo '#'.$idmodal; ?>").on('shown.bs.modal', function () {
google.maps.event.trigger(var_map, "resize");
var_map.setCenter(var_location);
});
</script>
<?php } ?>
</body>
</html>
答案 0 :(得分：1)
在循环内部，您将覆盖函数map_init()和变量lat＆amp; lng
更好的方法：
使用单个地图实例和单个模态。例如，可以存储链接的相关数据。通过data-*属性。好处：
减去地图载荷（请注意，地图载荷有一个配额）
<?php include ('includes/connect.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Contact Page with Single Map Modal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
body { padding: 10px; background-color:#CCC }
.map { height: 450px;background:red }
</style>
</head>
<script>
function map_init() {
//we need only a single maps-instance for the page
if(!$('body').data('map')){
var var_mapoptions = {
zoom: 2,
mapTypeControl: false,
panControl:false,
rotateControl:false,
streetViewControl: false,
};
$('body').data('map',new google.maps.Map($('<div class="map"/>')[0],
var_mapoptions));
}
return $('body').data('map');
}
//click-listener for the modal-links
$(document).on('click','a[data-map]',function(){
var data=$(this).data('map'),
map=map_init();
$('#map_modal')
//insert map into modal
.find('.modal-body')
.append(map.getDiv())
.end()
//set title
.find('.modal-title')
.text(data.NAME)
.end()
//add shown-listener
.one('shown.bs.modal',function(){
google.maps.event.trigger(map, "resize");
map.setCenter({lat:data.LAT,lng:data.LNG});
})
//show the modal
.modal('show');
});
</script>
<body>
<div class="container">
<!-- a single MODAL -->
<div class="modal fade" id="map_modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">NAME</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<!-- /MODAL -->
<?php
//getting results from database
$query = "SELECT * FROM store";
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {?>
<!-- row -->
<div class="row">
<p>
<!-- store the properties of the entry via data-attribute -->
<a href="#"
data-map="<?php echo htmlentities(json_encode($row));?>";>
<?php echo $row['NAME'];?>
</a>
</p>
</div>
<!-- /row -->
<?php } ?>
</div>
</body>
</html>