2014-10-24 2 views
0

나는 X 초마다 데이터베이스에서 위도, 경도를 업데이트하고 값을 표시하는 웹 페이지를 가지고 있습니다. 값을 업데이트하기 위해 서버 보낸 이벤트를 사용하고 있습니다. 내 서버 보낸 이벤트에 아무런 문제가 없습니다. X 초마다 페이지의 위도, 경도 및 속도를 업데이트 할 수 있습니다. 내 문제는 마커를 추가하려면 Google지도 스크립트 위도, 경도 값을 전달하고 싶습니다. 내가 어떻게 해?다른 변수로 EventSource 서버 보낸 이벤트 (SSE)

예이 스크립트는 데이터베이스에서 위도 값을 검색합니다.

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> 

답변

0

에게 인이 하나

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 
}); 
+1

이 솔루션을 당신에게 Nurdin 감사하십시오. 매력처럼 작동 – cupin06

관련 문제