Javascript 变量声明和谷歌地图

Question

我对 javascript 非常陌生，但对代码流程有一定的了解，我正在努力解决我认为的 Javascript 中的全局变量问题。

此脚本位于运行 php 页面的网页中，用于提取一些数据，然后对这些数据执行某些操作。

数据会发生两件事，首先它将其显示在一个单元格中，该单元格工作得很好，所以我知道正在设置变量并且正在显示代码。第二点是我是否遇到问题。然后，我想获取其中两个变量(GPSlat 和 GPSlon)并将它们传递给谷歌地图脚本以更新/重新居中 map 。

使用下面的代码，如果我在谷歌地图代码中放入测试警报，我会将变量 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>

根据以下评论和建议设法使脚本运行，最终结果是将字符串变量作为 float 对象传递，并使用超时/时间间隔来延迟 map 的加载，然后不断更新位置。现在可以正常工作了!

最终代码是:

<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>

Answer 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>