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

Question

首先，我已经开始编程差不多一周了，所以即使有一些必要的知识，我仍然会遗漏很多东西。 我正在制作一个PWA，并且当有人使用帐户登录时需要地图回显。 帐户正在运行，从数据库获取信息正在解决我们遇到的问题。 首先，我猜测echo中的脚本试图从js文件中获取一些东西，但由于可能是编写代码的方式而无法这样做。 在这个PHP代码中，一切都适用于其他地图示例，但我想使用另一个更合适的地图来满足我的需求。 总之，当我运行网站时，即使整个事情加载，地图也不会显示。 我目前正在猜测我使用“”或“或导入命令的方式存在问题。 我已经尝试了2天，现在改变了代码中的内容，但似乎没有任何工作。 我希望我能为您提供您需要的信息并期待您的建议。

我尝试过使用“而不是'内部脚本。不起作用导致它被识别为PHP代码。尝试使用额外'来自”部分导入，没有bueno。尝试使用heredoc，但不起作用因为我得到“语法错误，页面有unixpected end”或某种可能意味着我正在以错误的方式执行。已经更改了“to”insite attribute和url links导致它被标记为//消息或者它被认为是“PHP代码”。 这是我要使用的地图的链接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

请尝试以下代码。 它是相同的代码，除了我在javascript启动之前关闭PHP代码并在javascript结束后重新打开。 在传递变量lonlat ，我使用了符号， <?= $lonlat ?> 。

注意 ： 这是未经测试的代码。

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

Answer 2

管理得到这个工作。 使用esri的ARCGIS地图以及geojson图层来添加自定义要素。 谢谢大家的尝试。