Объявление переменных Javascript и Google Maps

Я ОЧЕНЬ новичок в javascript, но у меня есть разумное понимание процессов кода, я борюсь с тем, что я считаю проблемой глобальных переменных в Javascript.

Этот сценарий находится внутри веб-страницы, которая запускает страницу php, чтобы извлечь некоторые данные, а затем что-то сделать с этими данными.

С данными происходят две вещи: сначала они отображаются в ячейке, которая отлично работает, поэтому я знаю, что переменные устанавливаются и отображается код. Во-вторых, у меня проблемы. Затем я хочу взять две из этих переменных (GPSlat и GPSlon) и передать их в скрипт Google Maps для обновления / повторного создания карты.

С помощью приведенного ниже кода, если я добавлю тестовые оповещения в коде Google Maps, я получу переменную mycenter равной 0, 0, и если я попытаюсь предупредить только GPSlon или GPSlat, я получу неопределенное значение?

Я прочитал кучу переменных, но я все еще что-то упускаю. Любой гуру, который может подтолкнуть меня в правильном направлении?

<script type="text/javascript">
var GPSlat;
var GPSlon;
var temp;
var chill;
var HI;
var DP;
var pressure;
var heading;
var GPSalt;
var WindDir;
var WindSpd;

//check for browser support
if(typeof(EventSource)!=="undefined") {
    //create an object, passing it the name and location of the server side script
    var eSource = new EventSource("send_sse.php");
    //detect message receipt
    eSource.onmessage = function(event) {
        //write the received data to the page
        //document.getElementById("serverData").innerHTML = event.data;

        var inputdata = event.data;
        var array = inputdata.split("/");

        if (array[0] != null){
        temp = array[0];
        }
        if (array[1] != null){
        chill = array[1];
        }
        if (array[2] != null){
        HI = array[2];
        }
        if (array[3] != null){
        DP = array[3];
        }
        if (array[4] != null){
        hum = array[4];
        }
        if (array[5] != null){
        heading = array[5];
        }   
        if (array[6] != null){
            if (array[6]=="*"){
                GPSlat = 0;
            } else {
                GPSlat = array[6];
            }
        }
        if (array[7] != null){
            if (array[7]=="*"){
                GPSlon = 0;
            } else {
                GPSlon = array[7];
            }
        }
        if (array[8] != null){
            if (array[8]=="*"){
                GPSalt = 0;
            } else {
                GPSalt = array[8];
            }
        }
        if (array[9] != null){
        WindDir = array[9];
        }
        if (array[10] != null){
        WindSpd = array[10];
        }
        if (array[11] != null){
        pressure = array[11];
        }

        var br = "<BR>";
        var output = "Temperature: " + temp + "C" + br + "Wind Chill: " + chill + "C" + br + "Dew Point: " + DP + "C" + br + "Heat Index: " + HI + "C" + br + "Humidity: " + hum + "%" + br + "Pressure: " + pressure + "hPa" + br + br + "Heading: " + heading + br + "Lattitude: " + GPSlat + br + "Longitude: " + GPSlon + br + "Altitude: " + GPSalt + br + br + "Wind Direction: " + WindDir + br + "Wind Speed: " + WindSpd + "kPh"

        document.getElementById("serverData").innerHTML = output;


    }
}
else {
    document.getElementById("serverData").innerHTML="Whoops! No data from Sensor Computer received";
}



//GOOGLE MAPS CODE

var myCenter=new google.maps.LatLng([GPSlat],[GPSlon]);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:10,
  scaleControl:true,
  streetViewControl:true,
  overviewMapControl:true,
   mapTypeId:google.maps.MapTypeId.HYBRID
  };


    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);


var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);
}

if (myCenter!="(0, 0)"){
    google.maps.event.addDomListener(window, 'load', initialize);
    } else {
    document.getElementById("googleMap").innerHTML = "<center><BR><BR><BR><BR><BR><BR><BR><BR><BR>No GPS Data Available</center>"
}
</script>

Управляемый для запуска сценария на основе приведенных ниже комментариев и рекомендаций, конечный результат состоял в передаче строковых переменных в виде плавающих объектов и использовании timeout / timeinterval для задержки загрузки карты и последующего постоянного обновления местоположения. Теперь работает правильно!

Окончательный код был:

<script type="text/javascript">
var GPSlat;
var GPSlon;
var temp;
var chill;
var HI;
var DP;
var pressure;
var heading;
var GPSalt;
var WindDir;
var WindSpd;
var inputdata;
var map;
var marker;


//check for browser support
if(typeof(EventSource)!=="undefined") {

    var eSource = new EventSource("send_sse.php");
    //detect message receipt
        eSource.onmessage = function(event) {
        //write the received data to the page

        inputdata = String(event.data);
        //var inputdata = "23.2/23.2/24.9/9.7/43/NW/-27.471011/153.023449/12.5/S/1.97/1028";
        var array = inputdata.split("/");

        if (array[0] != null){
        temp = array[0];
        }
        if (array[1] != null){
        chill = array[1];
        }
        if (array[2] != null){
        HI = array[2];
        }
        if (array[3] != null){
        DP = array[3];
        }
        if (array[4] != null){
        hum = array[4];
        }
        if (array[5] != null){
        heading = array[5];
        }   
        if (array[6] != null){
            if (array[6]=="*"){
                GPSlat = 0;
            } else {
                GPSlat = array[6];
            }
        }
        if (array[7] != null){
            if (array[7]=="*"){
                GPSlon = 0;
            } else {
                GPSlon = array[7];
            }
        }
        if (array[8] != null){
            if (array[8]=="*"){
                GPSalt = 0;
            } else {
                GPSalt = array[8];
            }
        }
        if (array[9] != null){
        WindDir = array[9];
        }
        if (array[10] != null){
        WindSpd = array[10];
        }
        if (array[11] != null){
        pressure = array[11];
        }

        var br = "<BR>";
        var output = "Temperature: " + temp + "C" + br + "Wind Chill: " + chill + "C" + br + "Dew Point: " + DP + "C" + br + "Heat Index: " + HI + "C" + br + "Humidity: " + hum + "%" + br + "Pressure: " + pressure + "hPa" + br + br + "Heading: " + heading + br + "Lattitude: " + GPSlat + br + "Longitude: " + GPSlon + br + "Altitude: " + GPSalt + br + br + "Wind Direction: " + WindDir + br + "Wind Speed: " + WindSpd + "kPh"

        var dataset = "complete";
        document.getElementById("serverData").innerHTML = output;

    }
}

else {
        document.getElementById("serverData").innerHTML = "Error: No Sensor Data Avaialable";
}








setTimeout(loadScript, 500);
setInterval(updatemarker,10000);


function initialize()
{
var mapProp = {
  center: new google.maps.LatLng(parseFloat(GPSlat),parseFloat(GPSlon)),
  zoom:10,
  scaleControl:true,
  streetViewControl:true,
  overviewMapControl:true,
   mapTypeId:google.maps.MapTypeId.HYBRID
  };


map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);


positionmarker()

}


function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);

}


function positionmarker(){
marker=new google.maps.Marker({
  position:new google.maps.LatLng(parseFloat(GPSlat),parseFloat(GPSlon)),
  title:"PiCam"
  });

  marker.setMap(map);

}

function updatemarker(){
var newpos = new google.maps.LatLng(parseFloat(GPSlat),parseFloat(GPSlon));
marker.setPosition(newpos);
map.panTo(newpos)
}


</script>
Источник

1 ответ

Решение

В этой строке var myCenter=new google.maps.LatLng([GPSlat],[GPSlon]);LatLng всегда ожидает значения с плавающей точкой.

var myCenter=new google.maps.LatLng(parseFloat(GPSlat),parseFloat(GPSlon));

Используйте его и посмотрите:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var GPSlat;
var GPSlon;
var temp;
var chill;
var HI;
var DP;
var pressure;
var heading;
var GPSalt;
var WindDir;
var WindSpd;

//check for browser support
if(typeof(EventSource)!=="undefined") {


        var inputdata = "23.2/23.2/24.9/9.7/43/NW/-27.471011/153.023449/12.5/S/1.97/1028";
        var array = inputdata.split("/");

        if (array[0] != null){
        temp = array[0];
        }
        if (array[1] != null){
        chill = array[1];
        }
        if (array[2] != null){
        HI = array[2];
        }
        if (array[3] != null){
        DP = array[3];
        }
        if (array[4] != null){
        hum = array[4];
        }
        if (array[5] != null){
        heading = array[5];
        }   
        if (array[6] != null){
            if (array[6]=="*"){
                GPSlat = 0;
            } else {
                GPSlat = array[6];
            }
        }
        if (array[7] != null){
            if (array[7]=="*"){
                GPSlon = 0;
            } else {
                GPSlon = array[7];
            }
        }
        if (array[8] != null){
            if (array[8]=="*"){
                GPSalt = 0;
            } else {
                GPSalt = array[8];
            }
        }
        if (array[9] != null){
        WindDir = array[9];
        }
        if (array[10] != null){
        WindSpd = array[10];
        }
        if (array[11] != null){
        pressure = array[11];
        }


    }
else {

}

alert(GPSlat);
alert(GPSlon);
var myCenter=new google.maps.LatLng(parseFloat(GPSlat),parseFloat(GPSlon));

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:10,
  scaleControl:true,
  streetViewControl:true,
  overviewMapControl:true,
   mapTypeId:google.maps.MapTypeId.HYBRID
  };


    var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);


var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);
}

if (myCenter!="(0, 0)"){
    google.maps.event.addDomListener(window, 'load', initialize);
    } else {
    document.getElementById("map-canvas").innerHTML = "<center><BR><BR><BR><BR><BR><BR><BR><BR><BR>No GPS Data Available</center>"
}
</script>
  <body>
    <div id="map-canvas" style="float:left;width:100%;height:100%;">
    </div>

     </body>
Источник
Другие вопросы по тегам