如何将数据从MySQL传递到Google Maps

Question

我对如何将数据从PHP传递到我的Google Maps API感到困惑。

<script>

  <?
        $dbFirst = new database;
        $dbFirst->query("SELECT getLatitude,getLongitude FROM t_report
                         WHERE phoneNumber='$idimei' AND tanggal BETWEEN '$tgl1 00:00:00' and '$tgl1 23:59:59' AND (km IS NOT NULL AND km !='') ORDER BY ID ASC LIMIT 1");  
        $rowFirst=$dbFirst->tampilkan();

        while ($rowFirst=$dbFirst->tampilkan()){
            $lat=$rowFirst['getLatitude'];
            $lon=$rowFirst['getLongtitude'];
        }
    ?>
    var marker;

    function initMap() {

        var mark1 = {lat:X, lng:Y};

        var map = new google.maps.Map(document.getElementById('map'), {
            center: mark1,
            zoom: 18

        });

        marker = new google.maps.Marker({
            position: mark1,
            animation: google.maps.Animation.DROP,
            map: map
        });
        marker.addListener('click', toggleBounce);
    }
    function toggleBounce() {
        if (marker.getAnimation() !== null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }
  </script>

如何将$lat和$lon放入mark1的X和Y变量？我对如何在PHP外部传递数据感到困惑。感谢您的回答

Answer 1

只需这样做：

marker = new google.maps.Marker({
     position: '<?php echo $lat . ',' . $lon; ?>',
     animation: google.maps.Animation.DROP,
     map: map
});

Answer 2

要在javascript中将变量$lat和$lon从PHP传递到X和Y，您可以这样做：

var marker;
var X ="<?php echo $lat; ?>";
var Y ="<?php echo $lon; ?>";

或更短：

var marker;
var X =<?$lat?>;
var Y =<?$lon?>;

Answer 3

您可以使用以下方法将数据从PHP变量传递到JS假设这是您从数据库查询数据并将其存储在变量[[$ lat和$ lon

中的地方

<?php
//data from DB
$lat = "xx.xx";
$lon = "xx.xx";
?>

<script>
// then echo it into the js
// and assign to a js variable
let lat = '<?php echo $lat ;?>';
let lon = '<?php echo $lon ;?>';
// then
 function initMap() {

        var mark1 = {lat:lat, lng:lon};

        var map = new google.maps.Map(document.getElementById('map'), {
            center: mark1,
            zoom: 18

        });

        marker = new google.maps.Marker({
            position: mark1,
            animation: google.maps.Animation.DROP,
            map: map
        });
        marker.addListener('click', toggleBounce);
    }

</script>```