刷新Google地图而不重新加载页面

时间:2013-11-07 06:19:26

标签: jsp google-maps refresh

我想创建一个Google地图绘图仪,从数据库中获取GPS值,并使用标记将位置放在Google地图上。我已经有一个基本地图,显示指定位置的标记。这很有效,并且可以获取在地图上显示的初始位置。

我遍历数据库并获取最新条目。我也这样刷新地图:

function keepAlive()
{
    <%
        gps = new Gps();

        coordinates = gps.getCoordinates();

//                        out.print(
//                            String.format(
//                                    "alert(%s, %s);",
//                                    new Object[]
//                                    {
//                                        gps.getLatitude(coordinates),
//                                        gps.getLongitude(coordinates)
//                                    }));

        out.print(
            String.format(
                    "var newLatlng = new google.maps.LatLng(%s, %s);",
                    new Object[]
                    {
                        gps.getLatitude(coordinates),
                        gps.getLongitude(coordinates)
                    }));
    %>

    map.setCenter(newLatLng);
    marker.push(newLatLng);
}

setInterval(keepAlive, 10000);

Gps是一个Java类,可以完成繁重的工作,并返回数据库中的最新记录

刷新工作,因为如果我取消注释警报,它会在每10秒后弹出对话框。问题是没有获取新数据并且它不断弹出旧数据。问题是什么?

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。我们的想法不是动态地在JavaScript中设置变量,而是让其他JSP页面获取数据,调用JSP页面并使用JQuery加载值

这是现在的功能:

function refreshMap()
                {
                    $.ajax({
                        async: false,
                        type: 'GET',
                        url: 'lat.jsp',
                        success: function(data) {
                            newLat = data;
                        }
                    });

                    $.ajax({
                        async: false,
                        type: 'GET',
                        url: 'long.jsp',
                        success: function(data) {
                            newLong = data;
                        }
                    });

                    $.ajax({
                        async: false,
                        type: 'GET',
                        url: 'oldlat.jsp',
                        success: function(data) {
                            oldLat = data;
                        }
                    });

                    $.ajax({
                        async: false,
                        type: 'GET',
                        url: 'oldlong.jsp',
                        success: function(data) {
                            oldLong = data;
                        }
                    });


                    var lineCoordinates = [
                        new google.maps.LatLng(oldLat, oldLong),
                        new google.maps.LatLng(newLat, newLong),
                    ];

                    lineSymbol = null;

                    // Define the symbol, using one of the predefined paths ('CIRCLE')
                    lineSymbol = {
                        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                        scale: 4,
                        strokeColor: '#0000FF',
                        fillColor: '#0000FF',
                        fillOpacity: 1,
                    };

                    // Create the polyline and add the symbol to it via the 'icons' property.
                    line = new google.maps.Polyline({
                        path: lineCoordinates,
                        icons: [{
                                icon: lineSymbol,
                                offset: '100%'
                            }],
                        strokeOpacity: 0,
                        map: map
                    });

                    map.setCenter(new google.maps.LatLng(newLat, newLong));
                }

lat.jsp / long.jsp从数据库返回新的GPS坐标。使用setInterval(refreshMap, 5000);循环使用该函数会使地图动态刷新地图,而不会刷新整个页面