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

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

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

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

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

<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>

}))

}))

现在我已经尝试将这个lat和long值附加到地图坐标，但是我无法这样做，因为有错误抛出

为Javascript地图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,

}))； }

这段代码在开发者控制台中告诉我这个错误 “属性lat:非数字中的InvalidValueError:setPosition:非LatLng或LATLNERAL:”

完整的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);

<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>

var lat1；
长1号变种；
$（文档）.ready（函数（）{
$（'exampleModallocation'）。on（'show.bs.modal'，函数（e）{
//获取信息，以便在加载开始时快速更新到模态视图
var opener=e.relatedTarget；//这包含调用模态的元素
//我们从属性中获取详细信息
lat1=$（opener.attr（'latitude'）；
long1=$（opener.attr（'longgitu'）；
//把我们得到的东西放到我们的表格上
$（'#profileForm'）.find（'[name=“latitude”]'）.val（parseFloat（lat1））；
$（'#profileForm'）.find（'[name=“longgitu”]'）.val（parseFloat（long1））；
控制台日志（lat1）；
initMap（lat1，long1）；
});
});
函数initMap（lat1，long1）{
const mylatng={lat:lat1，lng:long1}；
const map=new google.maps.map（document.getElementById（“map”）{
缩放：4，
中心：{lat:6.927079，lng:79.861244}，
});
常量图像=
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
const beachMarker=new google.maps.Marker({
位置：{lat:lat1，lng:long1}，
地图，
图标：图像，
});
}

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

 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,
  });
 }

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

---

它似乎在抱怨

lat1

不是一个数字。您是否尝试将其值记录在控制台中以进行检查？@El_Vanja是的，我尝试将值记录到控制台中，并且lat和long值在控制台中显示，没有任何问题。但是当我将同一个变量分配给坐标时，它会在控制台中抛出错误，这可能会提供一些见解

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,
  });
 }