Javascript变量声明和谷歌地图

Question

我对javascript很陌生，但对代码过程有合理的理解，我正在努力解决我认为javascript中的全局变量问题。

这个脚本是在一个网页中运行一个php页面来拉入一些数据，然后对这些数据做一些事情。

数据发生了两件事，首先它显示在一个单元格中，它完美地工作，所以我知道变量正在设置和代码正在显示。第二点是我遇到了什么问题。然后，我想采取两个变量(GPSlat和GPSlon)，并将它们传递给谷歌地图脚本更新/重新中心的地图。

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

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>