dream02008 2015-06-18 21:41
浏览 47
已采纳

以HTML格式从php服务中检索值

I am trying to build a website that displays a google map with a user location (lat/long) from a php service that I wrote.

I already have a php script that gets the lat/long from a mobile app (via POST from the client), stores it in a DB, and read it back from the DB into two variables, let's call them $lat and $long. To make sure I have the right values in $lat and $long, I did a simple echo and got the two values.

I am struggling with understanding how to read these values from my index.html script. All the examples that I have seen suggest keeping the php code in the html file but I would rather keep them separate. I am also not sure how to assign these values to parameters in HTML/Javacript so I can actually display them on the map.

So my questions are: 1. how do I call that php file from HTML? 2. and how do I read $lat and $long from the php service and assign them to parameters in HTML/Javascript that I can display on the map?

EDIT: here is my PHP code and my index.html (Which is a 1:1 copy from the Google Maps v3 docs).

location.php:

$content = file_get_contents('php://input');
$post_data = json_decode($content , true);
$lat = $post_data['lat'];
$long = $post_data['long'];

//CONNECT TO MYSQL
$con1 = mysql_connect("localhost", "xxxxx", "yyyy", "zzzzz");
if ($con1->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    } 
   } 
    if (!$db_selected) {
        die ('Can\'t use foo : ' . mysql_error());
    }

    if (!empty($lat)) {
        $sql = "INSERT INTO LocationInfo (latitude, longitude) 

                              VALUES ('$lat', '$long');";
    mysql_query($sql) or die ('Error updating database: ' . mysql_error());
 }

$read_query = "SELECT * FROM LocationInfo;";
$results = mysql_query($read_query) or die ('Error reading from database: ' . mysql_error());
$column = array();

while($row = mysql_fetch_array($results)){
    $column[] = $row;
}


$current_lat = $column[sizeof($column) - 1]['latitude'];
$current_long = $column[sizeof($column) - 1]['longitude'];

echo $current_lat;
echo $current_long;

?>

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>My GeoLocation</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>

var map;

function initialize() {
  var mapOptions = {
    zoom: 14
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });
  • 写回答

1条回答 默认 最新

  • dongpi9164 2015-06-18 21:51
    关注

    The easiest way to get those variables in Javascript is to output them from PHP to JS, there is no direct bridge, so you will need in the HTML output a script block with the values you got from your SQL query, it will be something like this:

    <script>
      var lat = <?php echo $lat ?>;
      var long = <?php echo $long ?>;
    </script>
    

    Now you can use this variables in your javascripts to invoke the map, as a note you can add the variables definition to your main JS block as well.

    EDIT: Rename index.html to index.php

    <?php include_once('location.php') ?>
    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>My GeoLocation</title>
        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
        <script>
    
    var map;
    
    function initialize() {
     // var myLatlng = new google.maps.LatLng(<?php echo $lat ?>,<?php echo $long ?>);
      var mapOptions = {
        zoom: 14
        //mapTypeId: google.maps.MapTypeId.ROADMAP
        //center: myLatlng
      };
    
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);
    
          var infowindow = new google.maps.InfoWindow({
            map: map,
            position: pos,
            content: 'Location found using HTML5.'
          });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择