如何使用`echo`混合PHP和JavaScript代码？

Question

First of all it has been almost a week that I've started coding, so even though some essential knowledge is there, I'm still missing lots of things. I'm making a PWA and need a map echoed when someone logs in with an account. Accounts are working, getting info from databases is working so into the problem we go. First of all I'm guessing that the script inside the echo is trying to get some things from the js files but fails to do so because of probably the way the code is written. In this php code here, everything works for other map examples, but I wanted to use another more suitable map for my needs. Concluding, when I run the site, even though the whole thing loads, map doesn't show. I'm currently guessing that there is a problem with the way I use "" or '' or the import command. I've been trying for 2 days now changing things inside the code but nothing seems to be working. I hope I gave you the info you need and looking forward to your suggestions.

I've tried using " instead of ' inside script. Doesn't work cause it gets recognised as php code. Tried using additional ' to the "from" part of the import, no bueno. Tried using heredoc, but doesn't work cause I get the "syntax error ,page has unixpected end" or some sort which probably means I'm doing it the wrong way. Have changed the " to ' insite the attributions and url links cause it was either marked as a //message or it was recognised as a "php code". Here is the link to the map i want to use https://openlayers.org/en/latest/examples/xyz-esri.html

<?php
  $sql = "SELECT * FROM users WHERE uidUsers = '" . $_SESSION['userUid'] . "'";
  $result = mysqli_query($conn, $sql);
  $resultCheck = mysqli_num_rows($result);
  if ($resultCheck > 0) {
    while ($row = mysqli_fetch_assoc($result) ){
      $lon = $row['lon'];
      $lat = $row['lat'];
      $lonlat = $lon.", ".$lat;
      echo "<script type='text/javascript'>
    import Map from 'jsc/ol/Map.js';
    import View from 'jsc/ol/View.js';
    import TileLayer from 'jsc/ol/layer/Tile.js';
    import {fromLonLat} from 'jsc/ol/proj.js';
    import XYZ from 'jsc/ol/source/XYZ.js';
    var map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new XYZ({
              attributions: 'Tiles © <a href=\"https://services.arcgisonline.com/ArcGIS/' +
                  'rest/services/World_Topo_Map/MapServer\">ArcGIS</a>',
              url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
                  'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
            })
          })
        ],
        view: new View({
          center: fromLonLat([$lonlat]),
          zoom: 15
        })
      });
           </script>";
    }
  }
  ?>

Answer 1

Try the following code. It's your same code, except, I've closed PHP code before javascript starts and reopened after javascript ends. In between for passing the variable lonlat, I used the notation, <?= $lonlat ?>.

Note: This is untested code.

<?php
  $sql = "SELECT * FROM users WHERE uidUsers = '" . $_SESSION['userUid'] . "'";
  $result = mysqli_query($conn, $sql);
  $resultCheck = mysqli_num_rows($result);
  if ($resultCheck > 0) {
    while ($row = mysqli_fetch_assoc($result) ){
      $lon = $row['lon'];
      $lat = $row['lat'];
      $lonlat = $lon.", ".$lat;
      ?>
      <script type='text/javascript'>
    import Map from 'jsc/ol/Map.js';
    import View from 'jsc/ol/View.js';
    import TileLayer from 'jsc/ol/layer/Tile.js';
    import {fromLonLat} from 'jsc/ol/proj.js';
    import XYZ from 'jsc/ol/source/XYZ.js';
    var map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new XYZ({
              attributions: 'Tiles © <a href='https://services.arcgisonline.com/ArcGIS/' +
                  'rest/services/World_Topo_Map/MapServer'>ArcGIS</a>',
              url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
                  'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
            })
          })
        ],
        view: new View({
          center: fromLonLat([<?= $lonlat ?>]),
          zoom: 15
        })
      });
           </script>
    <?php
    }   // while loop ends
  } // closing if condition
  ?>