使用JSON数组中的标记加载Google地图?

时间:2012-04-11 03:58:27

标签: arrays json google-maps google-maps-markers

// // // // // // // // Ajax returns from PHP
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var obj = $.parseJSON(xmlhttp.responseText);

        var tLat = getCookie("tLat");
        var tLng = getCookie("tLng");

        var options = {
          zoom: 4,
          center: new google.maps.LatLng(40.7257, -74.0047),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Creating the map  
        var map = new google.maps.Map(document.getElementById('map'), options);

        // Adding a marker to the map
        var marker1 = new google.maps.Marker({
          position: new google.maps.LatLng(tLat, tLng),
          map: map,
          title: 'Click me',
          icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png'
        });

        var i = 0;
        for(i=0;i<=10;i++) {
            // Adding a marker to the map
            var marker[] = new google.maps.Marker({
            position: new google.maps.LatLng(obj[i].lat, obj[i].lng),
            map: map,
            title: 'Click me',
            icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png'
            });
        }

        $('#map').show();
    }
}
// // // // // // // //

所以我有一个JSON数组,我正在尝试加载前十个标记。我在for循环中的JavaScript有点格式错误,我正在尝试开发一个可以从JSON数组中正确添加标记的解决方案。 for循环上方的第一个标记确实正确加载。有人曾经这样做过吗?

P.S。我也试过这个也行不通。我的警报显示小数点后七位数的浮点值。

    // // // // // // // // Ajax returns from PHP
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var obj = $.parseJSON(xmlhttp.responseText);

        var tLat = getCookie("tLat");
        var tLng = getCookie("tLng");

        var options = {
          zoom: 4,
          center: new google.maps.LatLng(40.7257, -74.0047),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Creating the map  
        var map = new google.maps.Map(document.getElementById('map'), options);

        alert(obj[0][1]+','+obj[0][2]);

        //var myLatLng = new google.maps.LatLng(40.7257, -74.0047);
        var myLatLng = new google.maps.LatLng(String(obj[0][1]), String(obj[0][2]));

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

        $('#map').show();
    }
}
// // // // // // // //

P.P.P.S。我的obj警报框随附-84.3132324,34.0393598,看起来像是需要的格式。

1 个答案:

答案 0 :(得分:0)

    // // // // // // // // Ajax returns from PHP
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var obj = $.parseJSON(xmlhttp.responseText);

        var tLat = getCookie("tLat");
        var tLng = getCookie("tLng");

        var options = {
          zoom: 4,
          center: new google.maps.LatLng(tLat, tLng),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Creating the map
        var map = new google.maps.Map(document.getElementById('map'), options);



        var myLatLng = new google.maps.LatLng(parseFloat(obj[0][2]), parseFloat(obj[0][1]));

        //var marker = new google.maps.Marker({ position: myLatLng, map: map });

        var marker;

        for(var i=0;i<obj.length;i++) {

            var myLatLng = new google.maps.LatLng(parseFloat(obj[i].lat), parseFloat(obj[i].lng));

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

        $('#map').show();
    }
}
// // // // // // // //

事实证明这是使用API​​v3工作的方法之一