嵌入式php里面的javascript里面的php

时间:2015-12-20 07:09:40

标签: javascript php

我在php中有一个while循环,循环遍历一个文件并为每三行获取三个变量。然后我使用这三个变量来使用javascript创建标记。当我在我的javascript代码中传递php变量时,它不起作用。我读了相关的主题(Can I write PHP inside JavaScript inside 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>

这是我的file.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

1 个答案:

答案 0 :(得分:1)

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

<强>修复

在类型属性(简单引号)上更改引号,或者在无效语法

上使用php break

使用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/