为每个位置创建gmap3折线

时间:2012-03-29 20:43:09

标签: jquery ajax google-maps

我正在收集大量历史记录并为每个位置添加地图标记,只是想知道我如何在每个标记之间绘制折线?

jQuery.each(json, function(i, item) {
                var name = item.name;
                var userId = item.data.user;
                jQuery.each(item.data.data, function(i, nav) {
                    var ts = nav.timestamp;
                    var lat = nav.latitude;
                    var long = nav.longitude;

                    if (lat != null && long != null) {
                        addMarker(name, counts = counts + 1, ts, lat, long, userId);
                    }
                });
            })  

我创建了一个绘制折线的简单函数

 function addPolyline() {
    jQuery("#gMap").gmap3({
        action: 'addPolyline',
        options:{
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
        },
        path:[
        [37.772323, -122.214897],
        [21.291982, -157.821856],
        [-18.142599, 178.431],
        [-27.46758, 153.027892]
        ]
    }); 

}

但是很难弄清楚我如何从foreach数据中绘制折线?

1 个答案:

答案 0 :(得分:1)

假设在你的json数据中你已经有一个点数组,或者可以从数据的一部分构造一个点,修改你的addPolyline()函数来接受一个数组作为参数

    var polyArray=[
            [37.772323, -122.214897],
            [21.291982, -157.821856],
            [-18.142599, 178.431],
            [-27.46758, 153.027892]
            ];

    function addPolyline(polyArray) {
        jQuery("#gMap").gmap3({
            action: 'addPolyline',
            options:{
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
            },
            path:polyArray
        }); 

    }

不确定是否要在每个数据循环上调用此数据,或者将每个循环中的数据存储到数组中,并且最后只调用一次。

如果只在循环后调用一次:

    var polyArray=[];

    $.each(json, function(i,item){
        /* your other parsing code....plus add to polyArray*/                 
        polyArray.push( [ item.someValue, item.otherValue]);              

    });
    addPolyline(polyArray);