如何放置数据来自 mysql 数据库的单个谷歌地图标记？

Question

这就是我现在在我的索引中所做的我制作了这个按钮

<a class="btn btn-warning" href="map.php?id=<?php echo $fila['id']?> ">
                        <i class="bi bi-geo-alt-fill"></i> </a>

然后我在另一个文件中做了这个我得到了这个 php 代码

    <?php
  

  $conn = mysqli_connect("localhost", "root", "", "proyectoppy");

  if (mysqli_connect_errno()) {
      printf("Falló la conexión: %s\n", mysqli_connect_error());
      exit();
  }

    $query = "SELECT nombre, lat, lng FROM clientes WHERE id=?";
    $stmt = $conn->prepare($query);
    $stmt->bind_param("s", $id);
    $stmt->execute();
    $result = $stmt->get_result();
    $row = $result->fetch_assoc();
?>

这是我的 JavaScript 代码似乎我没有从我的 php 提取中收到任何东西，事实是我也不确定如何使用 json

  <script>
      var nombre = <?= json_encode($row ["nombre"]) ?>;
      var lat = <?= json_encode($row ["lat"]) ?>;
      var lng = <?= json_encode($row ["lng"]) ?>;
      
        var map;
            function initMap(){
            var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(parseFloat(lat),parseFloat(lng)),
            zoom: 12
            });
            var point = new google.maps.LatLng(
            parseFloat(lat),
            parseFloat(lng));
            var marker = new google.maps.Marker({
            map: map,
            position: point,
            map: map,
            title: nombre
            });
          }
    </script>

Answer 1

看起来你的 javascript 中有一些拼写错误。有一些

"

错误。像这样重写它：

   <?php
     $row = ['name' => 'coord', 'lat' => 0, 'lng' => 1];
   ?>
   <script>
      var row = <?= json_encode($row) ?>;
      var name = <?= json_encode($row ["name"]) ?>;
      var lat = <?= json_encode($row ["lat"]) ?>;
      var lng = <?= json_encode($row ["lng"]) ?>;
      console.log(row);
        var map;
            function initMap(){
            var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(parseFloat(lat),parseFloat(lng)),
            zoom: 12
            });
            var point = new google.maps.LatLng(
            parseFloat(lat),
            parseFloat(lng));
            var marker = new google.maps.Marker({
            map: map,
            position: point,
            map: map,
            title: nombre
            });
          }
    </script>

会产生以下数据：

<script>
      var row = {"name":"coord","lat":0,"lng":1};
      var name = "coord";
      var lat = 0;
      var lng = 1;
      console.log(row);
        var map;
            function initMap(){
            var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(parseFloat(lat),parseFloat(lng)),
            zoom: 12
            });
            var point = new google.maps.LatLng(
            parseFloat(lat),
            parseFloat(lng));
            var marker = new google.maps.Marker({
            map: map,
            position: point,
            map: map,
            title: nombre
            });
          }
    </script>

Answer 2

你也许可以像这样稍微修改你的 PHP：

<?php
    
    error_reporting( E_ALL );
    
    if( isset( $_GET['id'] ) ){
        
        mysqli_report( MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT );
        $conn = new mysqli("localhost", "root", "", "proyectoppy");


        $query = "SELECT nombre, lat, lng FROM clientes WHERE id=?";
        $stmt = $conn->prepare( $query );
        $stmt->bind_param("s", $_GET['id'] );
        $stmt->execute();
        $stmt->bind_result( $nombre, $lat, $lng );
        $stmt->fetch();
        
        $json=json_encode(array(
                'nombre'    =>  $nombre,
                'lat'       =>  $lat,
                'lng'       =>  $lng
            )
        );
        $stmt->free_result();
        $stmt->close();
        
        header('Content-Type: application/json');
        exit( $json );
    }
?>

然后修改您的 Javascript 以利用以前的

json_encoded

数据，如下所示：

<script>

    <?php
        printf(
            'const json=%s;\n',
            $json
        );
    ?>

    function initMap(){
        var latlng=new google.maps.LatLng( json.lat, json.lng );
        
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 12
        });

        var marker = new google.maps.Marker({
            map: map,
            position: map.getCenter(),
            map: map,
            title: json.nombre
        });
    }
</script>