Блог

Мы сталкиваемся с проблемами, упомянутыми ниже-

1. Это веб-страница, на которой я отображаю идентификатор пользователя, столбцы действий.идентификатор пользователя отображается из базы данных.В столбце действие есть кнопка статуса для каждого идентификатора пользователя, эта кнопка должна отображать широту выбранного идентификатора пользователя из базы данных.

Проблемы: Мне нужно отобразить индивидуальный выбранный путь пользователя на карте при нажатии кнопки в столбце действие и отобразить карту в модели начальной загрузки.

Это мой код:

                      <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">amp;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>
  

Вот пример кода для отображения карты Google на веб-странице. Карта будет отображаться внутри <div> с идентификатором 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_keyamp;callback=my_map_add"></script>