在按钮上单击显示数据库中单个用户的纬度和经度，并在谷歌地图上显示

Question

我们正面临如下所述的问题 -

1. 这是一个网页，我在其中显示用户ID，操作列。用户ID显示在数据库中。每个用户ID的操作列中都有一个状态按钮，此按钮必须显示从数据库中选择的用户ID的长度。

问题：我需要在单击操作列中的按钮时在地图上显示单个选定的用户路径，并在Bootstrap模型上显示地图。

这是我的代码：

                     <div class="body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped 
                              table-hover dataTable js-exportable" style="font- 
                               size: 14px;">
                                <thead>
                                    <tr>
                                      <th>UserId</th>
                                      <!-- <th>User Name</th>
                                      <th>Start Time</th>
                                      <th>Present Time</th>
                                      <th>Running Time</th> -->
                                      <th>latitude</th>
                                      <th>Lang</th>
                                      <th>Status</th>
                                    </tr>
                                </thead>
                               <tbody>
                                 <?php
                                   include('conn.php');

     $sql= "SELECT user_id,latitude,longitude, MIN(curr_time) AS mn, 
  MAX(curr_time) AS mx, Timediff(MAX(curr_time),MIN(curr_time)) AS 
  df,GROUP_CONCAT(latitude) as lat,GROUP_CONCAT(longitude) as langi
       FROM user_running_data
       GROUP BY user_id";
       $result = mysqli_query($db, $sql) or die (mysqli_error($db));
        if (mysqli_num_rows($result) > 0) {
           // output data of each row
           while($row = mysqli_fetch_assoc($result)) {?>
             <tr>
             <td><?php echo $row['user_id']; ?></td>
              <td>Supriya Pandit</td>
             <td><?php //echo $row["mn"]?></td>
             <td><?php //echo $row["mx"]?></td>
              <td><?php //echo $row["df"]?></td> 
              <td><?php print_r( explode(',',$row["lat"]))?></td>
              <td><?php print_r( explode(',',$row["langi"]))?></td>
             <td>
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal<?php echo $userid=$row['user_id']; ?>" onclick="initMap(<?php print_r($lat= explode(',',$row["lat"]))?>,<?php print_r($lang= explode(',',$row["langi"]))?>)">Status</button>
              <!-- Modal -->
              <div id="myModal<?php echo $row['user_id']; ?>" class="modal fade" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                      <div id="map"></div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>
              </div>
              </div>
            </td>
          </tr>
        <?php 
         }//while end
       } else {
           echo "0 results";
       }
       mysqli_close($db);
        ?>
        </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                </div>
               </div>

        </div>

        <!-- #END# Exportable Table -->
    </div>
</section>
<script type='text/javascript'>

     <?php
     $latitude = json_encode($lat);
      $longitude = json_encode($lang);
      echo "var arr=[$latitude,$longitude]\n";
     ?>
          //console.log(arr) ;
    function initMap() {

    var latlng = new google.maps.LatLng(15.839542, 74.508596);
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };
       var map = new google.maps.Map(document.getElementById('map'),myOptions);
        var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
        //console.log(latitude);
         //console.log(longitude);
        var aoCoordinatesfence = [];
       console.log(arr);
        for( var i in arr ){
            lat =arr[i].lat;
            lng=arr[i].langi;
            //user_id=markers[i].user_id;
            console.log(arr[i]);
            var coordfence = new google.maps.LatLng(arr[i].lat,arr[i].longi);
             console.log(coordfence);
            aoCoordinatesfence.push(coordfence);
            console.log(aoCoordinatesfence);
            var flightPath = new google.maps.Polyline({
              path: aoCoordinatesfence,
              geodesic: true,
              strokeColor: '#FF0000',
              strokeOpacity: 1.0,
              strokeWeight: 2,
          });
          flightPath.setMap(map);
      }
    }
    </script>

Answer 1

以下是在网页上显示Google地图的示例代码。该地图将显示在<div>中，ID为my_map_add。

<div id="my_map_add" style="width:100%;height:300px;"></div>

<script type="text/javascript">
function my_map_add() {
var myMapCenter = new google.maps.LatLng(28.5383866, 77.34916609);
var myMapProp = {center:myMapCenter, zoom:12, scrollwheel:false, draggable:false, mapTypeId:google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("my_map_add"),myMapProp);
var marker = new google.maps.Marker({position:myMapCenter});
marker.setMap(map);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=your_key&callback=my_map_add"></script>