在php内部的javascript中嵌入php - Embedded php inside javascript inside php

我在php中有一个while循环，它循环通过一个文件，每三行得到三个变量。然后，我使用这三个变量使用javascript创建一个标记。当我在javascript代码中传递php变量时，它不起作用。我阅读了相关的线程（我可以在PHP中的JavaScript中编写PHP吗？）并进行了相应的修改，但仍然没有成功。

<?php 
     $n="file.txt";
     $f=fopen($n,'a');
     while(($line = fgets($f)) !== false) {
         $m = $line;
         $long = fgets($f);
         $lat = fgets($f);  
         echo "
            <script type="text/javascript">
                var my_message = '$m';
                var my_long = '$long';
                var my_lat = '$lat';
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(my_lat,my_long),
                    map: map,
                });
            </script>";
    }  
?>

以下是.php文件：

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Hi!</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    width: 1000px;
    height: 600px;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<?php
      $m = $_POST['message'].PHP_EOL;
      $long = $_POST['longitude'].PHP_EOL;
      $lat = $_POST['latitude'].PHP_EOL;
      $n="file.txt";
      $f=fopen($n,'a');
      if ($m !== PHP_EOL) {    // Message is not empty
          fwrite($f,$m);
          fwrite($f,$long);
          fwrite($f,$lat);
      }
      fclose($f);
?>
<script type="text/javascript">
    var map;
    google.maps.event.addDomListener(window, 'load', function (event) {
      navigator.geolocation.getCurrentPosition(function (location) {
          initialize(location.coords.latitude, location.coords.longitude);
      });
    });
    function initialize(Lat, Long) {
      var mapOptions = {
          center: new google.maps.LatLng(Lat, Long),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      var myLatLng = {lat: Lat, lng: Long};
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
      });
    }
</script>
<div id="map"></div>
 // Following are buggy code.
<?php 
     $n="file.txt";
     $f=fopen($n,'a');
     while(($line = fgets($f)) !== false) {
         $m = $line;
         $long = fgets($f);
         $lat = fgets($f);  
         echo "
            <script type="text/javascript">
                var my_message = '$m';
                var my_long = '$long';
                var my_lat = '$lat';
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(my_lat,my_long),
                    map: map,
                });
            </script>";
    }  
?>
</body>
</html>

这是我的文件.txt

Hello!
151.2069900
-33.8674870
I am here!
-80.56344
43.471536666666665
I was here before!
48.8566140
2.3522220
I will come here one day!
22.851563
-79.278140

您可以通过计算行数直到三次来执行此操作输出之前

修复

更改type属性上的引号（简单引号）或php中断无效语法

使用file（）将整个文件返回到的行数组中

如何

坏方法

<script type='text/javascript'>
<?php
    $i = 0;
    $group = [];
    $data = file("file.txt");
    foreach($data as $line)
    {
        $group[] = trim($line);
        if(count($group) == 3) // or ($i%3 == 0)
        {
             echo "var my_message = '$group[0]';
                    marker = new google.maps.Marker
                    ({
                        position: new google.maps.LatLng('$group[2]','$group[1]'),
                        map: map,
                    });";
             $group = []; // reset the group
        }
        $i++;
    }
?>
<'/script>

好方法

经济和优化的代码一次获取所有数据，输出到多维数组中可直接从javascript读取，并在一段时间内加载标记及其消息。

输出的代码会像这样：

var coords = 
[
    ["Hello!","151.2069900","-33.8674870"],
    ["I am here!","-80.56344","43.471536666666665"],
    ["I was here before!","48.8566140","2.3522220"],
    ["I will come here one day!","22.851563","-79.278140"]
];

现在的代码：

<script type='text/javascript'>
<?php
    $i = 0;
    $tmp = [];
    $geodata = [];
    $rawdata = file("file.txt");
    foreach($rawdata as $line)
    {
        $tmp[] = trim($line);
        if(count($tmp) == 3) // or ($i%3 == 0)
        {
            $geodata[] = $tmp; // add new geo group to the final cluster
            $tmp = []; // reset the group
        }
        $i++;
    }
    echo "var coords = ".json_encode($geodata).";";
?>

var infowindow = new google.maps.InfoWindow();
var marker, i;
for(i = 0; i < coords.length; i++)
{  
  marker = new google.maps.Marker
  ({
    position: new google.maps.LatLng(coords[i][1], coords[i][2]),
    map: map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i)
  {
    return function()
    {
      infowindow.setContent(coords[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
<'/script>

在线示例

https://jsfiddle.net/mtroy/b14pjsro/6/embedded/result/