无法使用 JQuery 和 html 显示谷歌地图路线（API）

Question

我正在尝试按照this 教程的说明填充谷歌地图路线。 地图没有显示，我开始调查问题的根源。 我可以看到在将每个 GPS 条目添加到数组中，输出对象如下所示： 我相信它具有任何对象项目的名称（每个主题都称为 0）。 有人可以告诉我它是否应该是这样的吗？如果不是，那是什么问题？

代码（相关部分）：

/*
 * Function that convert the objects into computed data 
 */
function get_total_km($object_key) {
    // Get all the GPS data for the specific workout
    var data = window.localStorage.getItem($object_key);
    // Turn the stringified GPS data back into a JS object
    data = jQuery.parseJSON(data);

    if (data) {
        // Calculate the total distance travelled
        total_km = 0;
        for (i = 0; i < data.length; i++) {

            if (i === (data.length - 1)) {
                break;
            }

            total_km += gps_distance(data[i].coords.latitude, data[i].coords.longitude, data[i + 1].coords.latitude, data[i + 1].coords.longitude);
        }

        total_km_rounded = parseFloat(total_km.toFixed(2));
        // Calculate the total time taken for the track
        start_time = new Date(data[0].timestamp).getTime();
        //Seperated start_time_public for returning object
        start_time_public = new Date(data[0].timestamp).getHours();
        date_id = new Date(data[0].timestamp).getDay();
        end_time = new Date(data[data.length - 1].timestamp).getTime();
        total_time_ms = end_time - start_time;
        total_time_s = total_time_ms / 1000;
        final_time_m = Math.floor(total_time_s / 60);
        final_time_s = Math.floor(total_time_s - (final_time_m * 60));
//        console.log({total_km_rounded: total_km_rounded, final_time_m: final_time_m, final_time_s: final_time_s});
        return ({total_km_rounded: total_km_rounded, final_time_m: final_time_m, final_time_s: final_time_s, date_id: date_id, start_time_public: start_time_public, data: data});
    }
}

                    // Set the initial Lat and Long of the Google Map
                    var myLatLng = new google.maps.LatLng(get_total_km(key).data[0].coords.latitude, get_total_km(key).data[0].coords.longitude);
                    // Google Map options
                    var myOptions = {
                        zoom: 15,
                        center: myLatLng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    // Create the Google Map, set options
                    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                    var trackCoords = [];
                    // Add each GPS entry to an array
                    for (ion = 1; ion < get_total_km(key).data.length; ion++) {
                        if (ion === (get_total_km(key).data.length - 1)){
                            break;
                        }
                        var dataa = get_total_km(key);
                        trackCoords.push(new google.maps.LatLng(dataa.data[ion].coords.latitude, dataa.data[ion].coords.longitude));
                    }
                    console.log(trackCoords);
                    // Plot the GPS entries as a line on the Google Map
                    var trackPath = new google.maps.Polyline({
                        path: trackCoords,
                        strokeColor: "#FF0000",
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    });
                    // Apply the line to the map
                    trackPath.setMap(map);
                });

Answer 1

您的 GPS 对象与 get_total_km 函数中预期的格式不匹配。

您需要将 GPS 对象格式化为下一个格式：

[
    {coords:{latitude:some, longitude:some}},  
    {coords:{latitude:some, longitude:some}}
]

Answer 2

这是一个愚蠢的问题... 问题是我不小心用相同的 id 名称命名了 2 个 div，这导致了错误。