1

只是做一个与谷歌地图有关的小项目。

基本上，我在数据库中有要使用 ajax 检索的坐标，并在无需刷新页面的情况下更新地图。

php部分：-

$deviceID = $_POST['deviceID'];
$sqlLocation = "SELECT * FROM Location WHERE DeviceID = '".$deviceID."' AND Type ='network'";
$sqlResult = mysql_query($sqlLocation); 

while($row = mysql_fetch_assoc($sqlResult))
{
    $response["uid"] = $row["DeviceID"];
    $response["deviceInfo"]["Longitude"] = $row["Longitude"];
    $response["deviceInfo"]["Latitude"] = $row["Latitude"];
    $response["deviceInfo"]["Type"] = $row["Type"];
    $response["deviceInfo"]["latlontime"] = $row["latlontime"];

    echo json_encode($response);
}

多个json结果的格式：-

{"uid":"*deviceID here*","deviceInfo":
   {"Longitude":"x.xxxxxxx","Latitude":"x.xxxxxxx","Type":"network","latlontime":"2012-05-05 18:55:12"}
}

{"uid":"*deviceID here*","deviceInfo":
   {"Longitude":"y.yyyyyyyyy","Latitude":"y.yyyyyyyyy","Type":"network","latlontime":"2012-05-05 18:55:56"}
}

带有一些伪代码的 JavaScript 部分抱歉！

    var map;
var count =0;
function initialize(DeviceID) 
  {
    if(DeviceID!=null)
    {
    $.ajax({
                type:"POST",
                dataType:"json",
                data:{deviceID: DeviceID},
                url: "json_coords.php",
                contentType: "application/json; charset=utf-8",
                success: function(data) 
                {
 *****problem used be here******
                    var len = data.length;
                    for( var i = 0; i<len; i++) 
                    {
                            var json_row = data[i];
                            var latitude = json_row.deviceInfo.Latitude;
                            var longitude = json_row.deviceInfo.Longitude;
                            var title = "pos: "+i+json_row.deviceInfo.Type + " " 
                            +json_row.deviceInfo.latlontime ;
                            //alert_test(latitude,student.Longitude);

                            setMarker(latitude,longitude,title);
*********************************************************************************
                    }

                }
            });
    }

    else 
    {
        // do nothing
    }

    var latloncenter = new google.maps.LatLng(51,-1.4469157);
    var myOptions = 
    {
      zoom: 4,
      center: latloncenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



  }


function setMarker(lat,lon,titletxt)
{

var latlongMarker = new google.maps.LatLng(lat,lon);

var marker = new google.maps.Marker
    (
        {
            position: latlongMarker, 
            map: map,
            title:titletxt
        }
    ); 

}

在网站上按下某个 div 后将调用初始化函数：-

$('#leftcolumn>a').click(function() 
    {
    var deviceID = $(this).attr("name");

      //alert(deviceID);
      initialize(deviceID)
    });

如果您能帮助我，我将不胜感激

谢谢 ：）

*最初的问题是关于如何从带有 json 结果的 php 页面中检索数据* *

4

2 回答 2

1

jQuery 的 Ajax 函数（在 JSON 模式下）需要一个唯一的 json 对象，你 ara 发送 2，格式无效。

你可以做：

$response = array();

while($row = mysql_fetch_assoc($sqlResult))
{
    $response[] = (object) array(
         'uid'        => $row["DeviceID"],
         'deviceInfo' => (object) array  (
               'Longitude'  => $row["Longitude"],
               'Latitude'   => $row["Latitude"],
               'Type'       => $row["Type"],
               'latlontime' => $row["latlontime"]
         )
    );

}

echo json_encode($response);

和 onsuccess 回调：

success: function(data) {
     $.each(data, function (device) {
          var title = device.Type + ' ' + device.latlontime;
          setmarker( device.Longitude ,device.Latitude , title);
     });
}
于 2012-05-09T22:42:18.907 回答
0 
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&region=GB"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body onload="initialize();">
<div id="map_canvas" style="height:300px;width:500px"></div>
<a href="#" onclick="loaddata(1);">Load markers</a>
<script type="text/javascript">
 var map;
var count =0;
function initialize() 
  {    
    var latloncenter = new google.maps.LatLng(51,-1.4469157);
    var myOptions = 
    {
      zoom: 4,
      center: latloncenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

function loaddata(DeviceID)
{
if(DeviceID!=null)
    {
    $.ajax({
              type: "POST",
              dataType: "json",
              data:{deviceID: DeviceID },
              url: 'mapdata.php',
       success: function(data) 
       {       
           $.each(data,function(index,value) {
             console.log(value);
              /// I know there is no such thing as data.jsonGetvalueByID just trying to explain what I want to do 
             var longitude = value.deviceInfo.Longitude;
             var latitude = value.deviceInfo.Latitude;
             var type = value.deviceInfo.Type;
             var time = value.deviceInfo.latlontime;
             var title = type + " " +time;
             //calling function to add map marker
             createmarker(longitude, latitude, title);          
            });


       }
    }); 
    }

}

function createmarker(lat,lon,titletxt)
{
var latlongMarker = new google.maps.LatLng(lat,lon);

var marker = new google.maps.Marker
    (
        {
            position: latlongMarker, 
            map: map,
            title:titletxt
        }
    ); 

    return marker;
}
</script>
</body>
</html>
// my ajax file that just fakes the data needed, so replace with your database code.
<?php
$response = array();
$rows = array();
$rows[] = array("DeviceID"=>1,"Type"=>"Network","Longitude"=>"51.4343","Latitude"=>"-2.344","latlontime"=>date("Y-m-d H:i:s"));
$rows[] = array("DeviceID"=>2,"Type"=>"Network","Longitude"=>"55.4343","Latitude"=>"-2.644","latlontime"=>date("Y-m-d H:i:s"));
foreach ($rows as $row)
{
$data["uid"] = $row["DeviceID"];
    $data["deviceInfo"]["Longitude"] = $row["Longitude"];
    $data["deviceInfo"]["Latitude"] = $row["Latitude"];
    $data["deviceInfo"]["Type"] = $row["Type"];
    $data["deviceInfo"]["latlontime"] = $row["latlontime"];

    $response[] = $data;
}

echo json_encode($response);

?>
于 2012-05-09T23:01:12.423 回答