将地图标记获取到通过数据库传递的 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>

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

而从表格中获取经纬度的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