处理ajax返回的对象数组

时间：2014-06-24 18:34:47

标签： javascript php ajax google-maps-api-3 geolocation

这是我认为导致问题的ajax部分：

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "./php/censusdata2.php",
        success: function (data) 
        {
            createMarker($list.data.lat, $list.data.lng, map, $list.data.FORENAME);
        }   
    });
google.maps.event.addDomListener(window, 'load', initialize);


function createMarker(lat, lng, map, title)
    {
        var latlng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker(
        {
        position: latlng,
        map: map,
        title: title
        });
    marker.setMap(map);

    markers.push(marker);
    }

从这里得到它的数据：

$list=array();  
        foreach ($s as $row):

        $data = new stdClass(); // create a new object
        $data->lat=htmlspecialchars($row['lat'], ENT_QUOTES, 'UTF-8');
        $data->lng=htmlspecialchars($row['lng'], ENT_QUOTES, 'UTF-8');
        $data->FORENAME=htmlspecialchars($row['FORENAME'], ENT_QUOTES, 'UTF-8');
        $data->SURNAME=htmlspecialchars($row['SURNAME'], ENT_QUOTES, 'UTF-8');

        array_push($list,$data); // push object to stack array
        endforeach;
    echo json_encode($list);

这是来自'开发者工具 - 网络 - censusdata2 - 响应'的回复

  

[{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用名字”： “艾伦”， “姓”： “Wetherall”}，{ “LAT”： “54.508869”，“LNG “：” - 6.292547" ， “用的名字”： “安妮”， “姓”： “贝克特”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “威廉”， “姓”： “贝克特”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “约翰”， “姓”： “Wetherall”}，{ “LAT”：” 54.508869" ， “LNG”： “ - 6.292547”， “用名字”： “Henretta”， “姓”： “韦瑟勒尔”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用名字” ： “马克”， “姓”： “Wetherall”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “托马斯”， “姓”： “Wetherall”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”：“罗伯特   约翰 “ ”姓“： ”Wetherall“}，{ ”LAT“： ”54.508869“， ”LNG“： ” - 6.292547“， ”用的名字“： ”托马斯“， ”姓“： ”Wetherall“}，{” LAT “：” 54.508869" ， “LNG”： “ - 6.292547”， “用的名字”： “平民”， “姓”： “Wetherall”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547” “用的名字”： “莎拉”， “姓”： “汤普森”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”：“玛丽   L “ ”姓“： ”汤普森“}，{ ”LAT“： ”54.508869“， ”LNG“： ” - 6.292547“， ”用的名字“： ”安妮“， ”姓“： ”汤普森“}，{” LAT “：” 54.508869" ， “LNG”： “ - 6.292547”， “用名字”： “安”， “姓”： “汤普森”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “詹姆斯”， “姓”： “汤普森”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “约瑟夫”， “姓”： “汤普森” }，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “莎拉”， “姓”： “汤普森”}，{ “LAT”： “54.508869”， “LNG”： “-6.292547”， “用的名字”： “安妮”， “姓”： “穆赫兰”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “约翰”，“姓“：” 穆赫兰 “}，{” LAT “：” 54.508869" ， “LNG”： “ - 6.292547”， “用名字”： “帕特里克”， “姓”： “穆赫兰”}，{ “LAT”： “54.508869” “LNG”： “ - 6.292547”， “用的名字”： “约翰”， “姓”： “穆赫兰”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”：”苏珊 “ ”姓“： ”穆赫兰“}，{ ”LAT“： ”54.508869“， ”LNG“： ” - 6.292547“， ”用的名字“： ”亨利“， ”姓“： ”斯通“}，{” LAT “：” 54.508869" ， “LNG”： “ - 6.292547”， “用的名字”：“乔治·   海兰 “ ”姓“： ”Helles“}，{ ”LAT“： ”54.508869“， ”LNG“： ” - 6.292547“， ”用的名字“： ”威廉“， ”姓“： ”Helles“}，{” LAT “：” 54.508869" ， “LNG”： “ - 6.292547”， “用的名字”： “乔治”， “姓”： “Helles”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547” “用的名字”：“安   简 “ ”姓“： ”Helles“}，{ ”LAT“： ”54.508869“， ”LNG“： ” - 6.292547“， ”用的名字“： ”伊丽莎白“， ”姓“： ”麦肯“}，{” LAT “：” 54.508869" ， “LNG”： “ - 6.292547”， “用的名字”： “玛丽”， “姓”： “默里”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547” “用的名字”： “夏洛特”， “姓”： “默里”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “托马斯”， “姓”： “默里” }，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “约瑟夫”， “姓”： “默里”}，{ “LAT”： “54.508869”， “LNG”： “-6.292547”， “用的名字”： “玛丽”， “姓”： “默里”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “玛丽”，“姓“：” 格里本 “}，{” LAT “：” 54.508869" ， “LNG”： “ - 6.292547”， “用的名字”： “玛丽”， “姓”： “格里本”}，{ “LAT”： “54.508869” “LNG”： “ - 6.292547”， “用的名字”： “乔治”， “姓”： “格里本”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”：”周梁淑怡 “ ”姓“： ”格里本“}，{ ”LAT“： ”54.508869“， ”LNG“： ” - 6.292547“， ”用的名字“： ”莎拉“， ”姓“： ”穆赫兰“}，{” LAT “：” 54.508869" ， “LNG”： “ - 6.292547”， “用的名字”： “安娜”， “姓”： “穆赫兰”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547” “FOREN AME “：” 伊丽莎”， “姓”： “穆赫兰”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “Rachiel”， “姓”： “穆赫兰”} ，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用名字”： “伊丽莎”， “姓”： “穆赫兰”}，{ “LAT”： “54.508869”， “LNG”：” -6.292547" ， “用的名字”： “詹姆斯”， “姓”： “穆赫兰”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “罗伯特”， “姓” “尼斯贝特”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “托马斯”， “姓”： “博文”}，{ “LAT”： “54.508869” “LNG”： “ - 6.292547”， “用的名字”： “伊丽莎白”， “姓”： “博文”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”：“玛格丽特”， “姓”： “奥哈拉”}，{ “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用名字”： “亨利”， “姓”： “奥哈拉”}， { “LAT”： “54.508869”， “LNG”： “ - 6.292547”， “用的名字”： “詹姆斯”， “姓”： “奥哈拉”}，{ “LAT”： “54.508869”， “LNG”： “-6.292547”， “用名字”： “玛丽”， “姓”： “McGarrell”}]

3 个答案:

答案 0 :(得分：0)

在success回调中，您永远不会遍历数据数组。相反，您正尝试从点阵列创建一个标记。

而不是

$.ajax({
    type: "GET",
    dataType: "json",
    url: "./php/censusdata2.php",
    success: function (data) 
    {
        createMarker($list.data.lat, $list.data.lng, map, $list.data.FORENAME);
    }   
});

尝试

$.ajax({
    type: "GET",
    dataType: "json",
    url: "./php/censusdata2.php",
    success: function (data) 
    {
        $.each(data,function(index,point){
            createMarker(point.lat, point.lng, map, point.FORENAME);
        });
    }   
});

working fiddle

答案 1 :(得分：0)

$.each(data, function(i,v) { 
     createMarker(v.lat, v.lng, map, v.FORENAME);
});

这应该针对您获得的每个标记运行.. 把它放在success: function(data) { ....... }

里面

答案 2 :(得分：0)

以下是一些将您的观点放在地图上的代码。看到它在这里工作：http://jsfiddle.net/wilsonjonash/ER92u/

JavaScript的：

jQuery(document).ready(function () {
    var map;
    var centerPosition = new google.maps.LatLng(54.508869, -6.292547);

    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);
    $.each(points,function(index,point){
        var latlng = new google.maps.LatLng(point.lat, point.lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: point.FORENAME
        });
    });
});

var points = [{"lat":"54.508869","lng":"-6.292547","FORENAME":"Ellen","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Annie","SURNAME":"Beckett"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"William","SURNAME":"Beckett"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"John","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Henretta","SURNAME":"Wetheral"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mark","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Robert John","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Lizzie","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Sarah","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary L","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Annie","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Anne","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"James","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Joseph","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Sarah","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Annie","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"John","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Patrick","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"John","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Susan","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Henry","SURNAME":"Johnstone"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"George Hy","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"William","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"George","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Ann Jane","SURNAME":"Helles"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Elizabeth","SURNAME":"McCann"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Charlotte","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Joseph","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Murray"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"George","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Selina","SURNAME":"Gribben"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Sarah","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Anna","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Eliza","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Rachiel","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Eliza","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"James","SURNAME":"Mulholland"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Robert","SURNAME":"Nisbet"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Bowen"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Elizabeth","SURNAME":"Bowen"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Margaret","SURNAME":"O'Hara"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Henry","SURNAME":"O'Hara"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"James","SURNAME":"O'Hara"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary","SURNAME":"McGarrell"}];

HTML：

<div id="map"></div>

CSS：

 #map {
     height: 500px;
     width: 500px;
 }

当然，由于所有点都具有相同的坐标集，因此只能看到一个标记。

相关问题
最新问题