从 JSON 数组中加载带有标记的谷歌地图？答案

【问题标题】：Loading a Google Maps with markers from a JSON array?从 JSON 数组中加载带有标记的谷歌地图？
【发布时间】：2012-04-23 09:12:22
【问题描述】：

// // // // // // // // 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 循环上方的第一个标记确实可以正确加载。以前有人做过吗？

附：我也试过这个也不起作用。我的警报显示小数点后七位数的浮点值。

    // // // // // // // // 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，看起来像所需的格式。

【问题讨论】：

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

【解决方案1】：

    // // // // // // // // 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();
    }
}
// // // // // // // //

事实证明，这是使用 APIv3 工作的方法之一

【讨论】：