获取地图标记到通过数据库传递的 LAT 和 LONG 坐标

Question

当用户在早上签到以标记他们的出勤时，我会自动获取用户的位置。我已成功获取纬度和经度坐标并将它们保存在数据库中以供进一步使用。

在管理员面板中，我希望管理员查看保存在数据库表中的坐标位置。对于这个功能，我有一个如下所示的表格，

而且由于记录的每个出席人数可以有不同的坐标，我放置了一个带有地图标记图标的按钮。当管理员点击地图标记图标之一时，会弹出一个带有坐标值的模式（经纬度）

这就是我为表格编写代码的方式。

<table id="myTable" class="table table-bordered table-hover table-striped" style="width: 100%; text-                    
align: center;">
<thead>
<tr>

<th><strong>Name</strong></th>
<th><strong>Date</strong></th>
<th><strong>Time</strong></th>
<th><strong>In / Out</strong></th>
<th ><strong></strong></th>
<th style="text-align: center; width:2%;"><strong></strong></th>

</tr>
</thead>
<br>
<tbody>
<?php
$query="SELECT employees.EMP_ID, employees.Name, attendance.* FROM employees INNER JOIN attendance ON 
employees.Email = attendance.Email_Address;";
$result = mysqli_query($connect,$query);
if($result->num_rows>0){
 while($row = mysqli_fetch_assoc($result)) { ?>
<tr>

<td style="text-align: center;">
<?php echo $row["Name"]; ?></td>
<td style="text-align: center;"><?php echo $row["Date_Log"]; ?></td>
<td style="text-align: center;"><?php echo $row["Time_Log"]; ?></td>
<td style="text-align: center;"><?php if ($row['IN_OUT']=="In") {
  ?>
  <span class="badge bg-success"><?php echo $row["IN_OUT"]; ?></span>
  <?php
}
else if ($row['IN_OUT']=="Out"){
  ?>
  <span class="badge bg-danger"><?php echo $row["IN_OUT"]; ?></span>
  <?php
}
?>
</td>

<td><a data-bs-toggle="modal" data-bs-target="#exampleModaldaterange"><i class="fas fa-file-pdf" 
style="color: green;"></i></a></td>

<td style="text-align: center; width:2%;">
<?php
if ($row['Latitude']=="Location Not Fetched" && $row['Longitude']=="Location Not Fetched") {
  ?>
  <span class="badge bg-info text-dark">Location Not Fetched</span>
  <?php
}
else{
  ?>
  <a data-bs-toggle="modal" data-bs-target="#exampleModallocation"  latitude="<?php echo 
$row['Latitude']; ?>" longgitu="<?php echo $row['Longitude'];?>" role="button" class="btn btn- 
primary"><i class="fas fa-map-marker-alt"></i></a>
  <?php
}
?>
</td>
</tr>
<?php } }
else {
  ?>
  <div class="alert alert-danger" role="alert">
  Oops No Records Were Found For The Search Term - <?php echo $empidsearch; ?>
  </div>
  <?php
} ?>
</tbody>
</table>

注意这个代码

<td style="text-align: center; width:2%;">
<?php
if ($row['Latitude']=="Location Not Fetched" && $row['Longitude']=="Location Not Fetched") {
?>
<span class="badge bg-info text-dark">Location Not Fetched</span>
<?php
}
else{
?>
<a data-bs-toggle="modal" data-bs-target="#exampleModallocation"  latitude="<?php echo 
$row['Latitude']; ?>" longgitu="<?php echo $row['Longitude'];?>" role="button" class="btn btn- 
primary"><i class="fas fa-map-marker-alt"></i></a>
<?php
}
?>
</td>

我已将从数据库中获取的纬度和经度值设置为按钮，当点击按钮时，会打开一个模态，其中我有 2 个输入，在两个输入上，这两个经纬度坐标显示成功，如如下图，

而从table获取lat和long到modal的JS代码如下，

var lat1;
var long1;
$(document).ready(function(){

$('#exampleModallocation').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal 
//we get details from attributes
lat1=$(opener).attr('latitude');
long1=$(opener).attr('longgitu');
//set what we got to our form
$('#profileForm').find('[name="latitude"]').val(parseFloat(lat1));
$('#profileForm').find('[name="longgitu"]').val(parseFloat(long1));
console.log(lat1);
initMap(lat1, long1);

});

});

现在我试图将这个经纬度值附加到地图坐标上，但我无法这样做，因为抛出了错误。

为 Javascript Maps Api (Google) 编写的代码如下，

function initMap(lat1, long1) {
const myLatLng = { lat: lat1, lng: long1 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: 6.927079, lng: 79.861244 },
});
const image =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
const beachMarker = new google.maps.Marker({
position: { lat: lat1, lng: long1 },
map,
icon: image,

}); }

这段代码在开发者控制台中引发了这个错误 "InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number"

完整的JS代码如下，

<script>
var lat1;
var long1;
$(document).ready(function(){

$('#exampleModallocation').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal 
//we get details from attributes
lat1=$(opener).attr('latitude');
long1=$(opener).attr('longgitu');
//set what we got to our form
$('#profileForm').find('[name="latitude"]').val(parseFloat(lat1));
$('#profileForm').find('[name="longgitu"]').val(parseFloat(long1));
console.log(lat1);
initMap(lat1, long1);
});

});

function initMap(lat1, long1) {
const myLatLng = { lat: lat1, lng: long1 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: 6.927079, lng: 79.861244 },
});
const image =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
const beachMarker = new google.maps.Marker({
position: { lat: lat1, lng: long1 },
map,
icon: image,
});
}
</script>

Answer 1

问题已通过此问题的此代码块解决。

 map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: { lat: parseFloat(lat), lng: parseFloat(lng) },
        mapTypeId: 'terrain', 
        disableDefaultUI: true
 });

新更新的工作代码是

function initMap(lat1, long1) {
  const myLatLng = { lat: lat1, lng: long1 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 6.927079, lng: 79.861244 },
  });
  const 
 image= 
 "Image URL";
  const beachMarker = new google.maps.Marker({
    position: { lat: parseFloat(lat1), lng: parseFloat(long1) },
    map,
    icon: image,
  });
 }

链接到带有原始答案的文章 Original Answer