Javascript Google api v3-从信息窗口到json txt文件：保存用户添加的表单数据_Javascript_Php_Json_Google Maps Api 3

Javascript Google api v3-从信息窗口到json txt文件：保存用户添加的表单数据

javascript php json google-maps-api-3

Javascript Google api v3-从信息窗口到json txt文件：保存用户添加的表单数据,javascript,php,json,google-maps-api-3,Javascript,Php,Json,Google Maps Api 3,我制作了谷歌地图api v3。我想通过点击标记保存用户添加的表单数据，它会出现信息窗口，信息窗口包含表单数据，然后添加的数据将保存在json txt文件中。下面是map.html代码 <!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type"

我制作了谷歌地图api v3。我想通过点击标记保存用户添加的表单数据，它会出现信息窗口，信息窗口包含表单数据，然后添加的数据将保存在json txt文件中。下面是map.html代码

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var marker;
    var infowindow;

    function initialize() {
      var latlng = new google.maps.LatLng(-6.9667, 110.41677);
      var options = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map-canvas"), options);
      var html = "<table>" +
             "<tr> <td> Title:</td> <td><input type='text' name='title' id='title'/> </td> </tr>  " +
         "<tr> <td> Description:</td> <td><input type='text' name='description' id='description'/> </td> </tr> " +
         "<tr> <td> Category:</td> <td><input type='text' name='category' id='category'/> </td> </tr> " +
             "<tr> <td></td> <td> <input type='submit' id='submit' value='Submit' onclick='saveData()' /> </td> </tr> ";
    infowindow = new google.maps.InfoWindow({
     content: html
    });

    google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
    });
    }

    function saveData() {
      var title = escape(document.getElementById("title").value);
      var description = escape(document.getElementById("description").value);
      var category = escape(document.getElementById("category").value);
      var latlng = marker.getPosition();

      var url = "save_json.php?title=" + title + "&description=" + description +
            "&category=" + category + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
      downloadUrl(url, function(data, responseCode) {
    if (responseCode == 200 && data.length <= 1) {
      infowindow.close();
      document.getElementById("message").innerHTML = "Location added.";
    }
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

      request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);
    }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
    </script>
  </head>

  <body style="margin:0px; padding:0px;" onload="initialize()">
    <div id="map-canvas" style="width: 800px; height: 500px"></div>
    <div id="message"></div>
  </body>

</html>

有人能帮我纠正吗？非常感谢您提供的任何帮助

使其正确无误…目前哪些功能不正常？您是否尝试过该代码？我认为问题在于save_json.php没有响应map html，添加的数据没有发送到data.txt

<?php
    // Append new form data in json string saved in text file

    // path and name of the file
$filetxt = 'dirdata/data.txt';

    // check if all form data are submited, else output error message
    if(isset($_POST['title']) && isset($_POST['lat']) && isset($_POST['lng']) && isset($_POST['description']) && isset($_POST['category'])) {
    // if form fields are empty, outputs message, else, gets their data
    if(empty($_POST['title']) || empty($_POST['lat']) || empty($_POST['lng']) || empty($_POST['description']) || empty($_POST['category'])) {
        echo 'All fields are required';
    }
    else {
    // gets and adds form data into an array
    $data = array(
      'title'=> $_POST['title'],
      'lat'=> (float) $_POST['lat'],
      'lng'=> (float) $_POST['lng'],
      'description'=> $_POST['description'],
      'category'=> $_POST['category'],
    );

    // path and name of the file
    $filetxt = 'dirdata/data.txt';

    $arr_data = array();        // to store all form data

    // check if the file exists
    if(file_exists($filetxt)) {
      // gets json-data from file
      $jsondata = file_get_contents($filetxt);

      // converts json string into array
      $arr_data = json_decode($jsondata, true);
    }

    // appends the array with new form data
    $arr_data[] = $data;

    // encodes the array into a string in JSON format (JSON_PRETTY_PRINT - uses whitespace in json-string, for human readable)
    $jsondata = json_encode($arr_data, JSON_PRETTY_PRINT);

    // saves the json string in "data.txt" (in "dirdata" folder)
    // outputs error message if data cannot be saved
    if(file_put_contents('dirdata/data.txt', $jsondata)) echo 'Data successfully saved';
    else echo 'Tidak dapat menyimpan data di "dirdata/data.txt"';
  }
}
    else echo 'Form fields not submited';
?>

[
    {
    "title": "title",
    "lat": -6.9000,
    "lng": -110.000,
    "description": "description",
    "category": "category"
    }
]