Google 在 while 循环中映射引导模式

Question

我想在我的引导模式中创建谷歌地图。我的数据库中有 LAT 和 LNG，我想根据这些值为我数据库中的每个商店创建带有谷歌地图的引导模式。似乎我有问题，但我不确定在哪里。我在模态中只得到了一部分地图，即使 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">&times;</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>

Answer 1

在循环中，您将覆盖函数 map_init() 和变量 lat & lng

更好的方法：

使用单个地图实例和单个模式。链接的相关数据可以存储，例如通过data-* 属性。好处：

1. 更好的性能（不能在每次点击时创建地图实例）

2. 更少的地图加载（注意地图加载是有配额的）

   <?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">&times;</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>