Question

我有一个网页，每隔X秒从数据库更新纬度，经度并显示值。我使用Server-Sent Event来更新值。我的服务器发送事件没有任何问题。它可以每隔X秒在页面上更新纬度，经度和速度。我的问题是我要将纬度，经度值传递给谷歌地图脚本来添加标记。我该怎么办？

示例此脚本将从数据库中检索纬度值。

latitude.onmessage = function(e) {
    //document.getElementById("latitude").innerHTML += e.data + '<br />';
    ('#latitude').text(e.data);
};

如何将纬度值传递给此代码。

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(LATITUDE VALUE, LONGITUDE VALUE),
    map: map
});

以下是完整代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
    <p>Example server sent event</p><br>
    Latitude: <span id="latitude"></span><br>
    Longitude: <span id="longitude"></span><br>
    Speed: <span id="speed"></span>

    <div id="map" style="width:100%;height:380px;"></div><script>

                    function initialize()
                    {
                        var latitude = new EventSource("<?php echo base_url() . 'sse_push/getLatitude'; ?>");
                        var lgt;
                        var lat;
                        latitude.onmessage = function (e) {
                            //document.getElementById("latitude").innerHTML += e.data + '<br />';
                            $('#latitude').text(e.data);
                        };
                        var longitude = new EventSource("<?php echo base_url() . 'sse_push/getLongitude'; ?>");
                        longitude.onmessage = function (e) {
                            //document.getElementById("longitude").innerHTML += e.data + '<br />';
                            $('#longitude').text(e.data);
                        };
                        var speed = new EventSource("<?php echo base_url() . 'sse_push/getSpeed'; ?>");
                        speed.onmessage = function (e) {
                            //document.getElementById("speed").innerHTML += e.data + '<br />';
                            $('#speed').text(e.data);
                        };

                        var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 10,
                            center: new google.maps.LatLng(-33.92, 151.25),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        });

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

                        marker.setMap(map);
                    }
                    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</body>
</html>

Answer 1

尝试这个

latitude.onmessage = function(e) {
    //document.getElementById("latitude").innerHTML += e.data + '<br />';
    ('#latitude').text(e.data);
    sessionStorage.setItem("latitude",e.data);
}; 

longitude.onmessage = function(e) {
    //document.getElementById("longitude").innerHTML += e.data + '<br />';
    ('#latitude').text(e.data);
    sessionStorage.setItem("longitude",e.data);
}; 

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(sessionStorage.latitude, sessionStorage. longitude),
    map: map
});

将数据事件源服务器发送事件（SSE）作为另一个变量传递

1 个答案: