JSON调用后JS中的全局变量重置

Global variable in JS reset after JSON call

本文关键字:全局变量 调用 JS JSON      更新时间:2023-09-26

FIRST TIM POSTIN HERE>>PLZ ADVISE IF QUESTION OR FORMAT UNCLEAR

以下代码检索路线和相关坐标的列表。该列表显示为可单击的表格。

$("#listAll").click(function() {
  $.mobile.navigate("#page31");
  if (routes.length == 0) {
    mLoader('show');
    $.getJSON("tbs.ashx" + "?callback=?" + "&method=getAllRoutes", {
      format: "json"
    }).always(
      function(result) {
        routes = result.routes;
        var tbl = '<table width="100%" data-role="table" id="table-column-toggle" data-mode="columntoggle" class="table-stroke table-stripe"><thead><tr class="ui-bar-b"><th>No.</th><th>From</th><th>To</th></tr></thead>';
        tbl += '<tbody>';
        for (j = 0; j < routes.length; j++) {
          var fr = inArray(stops, routes[j].fr);
          var to = inArray(stops, routes[j].to);
          tbl += '<tr onclick="ListSchedule1(' + routes[j].id + ');mapRoute33(' + routes[j].id + ',' + routes[j].fr + ',' + routes[j].to + ')" style="cursor: pointer;"><td>' + routes[j].name + '</td><td>' + fr.name + '</td><td>' + to.name + '</td></tr>';
        }
        tbl += '</tbody></table>';
        $("#routes31").html(tbl);
        mLoader('hide');
      }
    );
  }
});

**函数mapRoute33是传递可变路由[j].id.

我现在正试图存储这个值以传递到一个新的HTML页面。此值不断重置。**

单击列表中的路线后,该路线的地图将绘制在新的HTML#page31中。

现在,在#page31;点击"信息"按钮会在第321页中显示一个表格,其中包含该路线的时间表。

为了检索数据,需要routes[j].id的值,但是下面js中的赋值会不断重置。

    v_route_id = route_id;  //where v_route_id has been declared as a global variable.

  mapRoute33 = function(routeid, startid, stopid) {
    //global variable assignment
    v_route_id = routeid;
    $("#map33").height($(window).height() - 40);
    $("#map33").html();
    $.mobile.navigate("#page33");
    if (map33 == null) {
      setTimeout(function() {
          var myOptions = {
            styles: [{
              "featureType": "landscape",
              "stylers": [{
                "hue": "#FFBB00"
              }, {
                "saturation": 43.400000000000006
              }, {
                "lightness": 37.599999999999994
              }, {
                "gamma": 1
              }]
            }, {
              "featureType": "road.highway",
              "stylers": [{
                "hue": "#FFC200"
              }, {
                "saturation": -61.8
              }, {
                "lightness": 45.599999999999994
              }, {
                "gamma": 1
              }]
            }, {
              "featureType": "road.arterial",
              "stylers": [{
                "hue": "#FF0300"
              }, {
                "saturation": -100
              }, {
                "lightness": 51.19999999999999
              }, {
                "gamma": 1
              }]
            }, {
              "featureType": "road.local",
              "stylers": [{
                "hue": "#FF0300"
              }, {
                "saturation": -100
              }, {
                "lightness": 52
              }, {
                "gamma": 1
              }]
            }, {
              "featureType": "water",
              "stylers": [{
                "hue": "#0078FF"
              }, {
                "saturation": -13.200000000000003
              }, {
                "lightness": 2.4000000000000057
              }, {
                "gamma": 1
              }]
            }, {
              "featureType": "poi",
              "stylers": [{
                "hue": "#00FF6A"
              }, {
                "saturation": -1.0989010989011234
              }, {
                "lightness": 11.200000000000017
              }, {
                "gamma": 1
              }]
            }],
            zoom: 10,
            center: new google.maps.LatLng(-20.2838936, 57.5284781),
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            rotateControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map33 = new google.maps.Map(document.getElementById("map33"), myOptions);
          croute = inArray(routes, routeid);
          polyArr33 = [];
          var pts = [];
          var bounds = new google.maps.LatLngBounds();
          var vertices = croute.pts;
          var verticesArray = vertices.split("|");
          for (k = 0; k < verticesArray.length; k++) {
            var ll = verticesArray[k].split(",");
            var point = new google.maps.LatLng(ll[1], ll[0]);
            pts.push(point);
            bounds.extend(point);
          }
          var poly = new google.maps.Polyline({
            path: pts,
            strokeColor: "red",
            strokeOpacity: 0.6,
            strokeWeight: 5
          });
          polyArr33.push(poly);
          poly.setMap(map33);
          map33.fitBounds(bounds);
          for (w = 0; w < croute.stops.length; w++) {
            var gr = {
              path: google.maps.SymbolPath.CIRCLE,
              scale: 5,
              strokeColor: 'red',
              strokeWeight: 4
            };
            var fp = new MarkerWithLabel({
              position: new google.maps.LatLng(croute.stops[w].lat, croute.stops[w].lng),
              draggable: false,
              icon: gr,
              labelContent: croute.stops[w].name,
              labelAnchor: new google.maps.Point(-12, 18),
              labelClass: 'stp',
              labelStyle: {
                opacity: 0.8
              }
            });
            fp.setMap(map33);
            polyArr33.push(fp);
          }
          var start = inArray(stops, startid);
          var gr = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 5,
            strokeColor: 'black',
            strokeWeight: 4
          };
          var fp = new MarkerWithLabel({
            position: new google.maps.LatLng(start.lat, start.lng),
            draggable: false,
            icon: gr,
            labelContent: start.stop,
            labelAnchor: new google.maps.Point(-12, 18),
            labelClass: 'trm',
            labelStyle: {
              opacity: 0.8
            }
          });
          fp.setMap(map33);
          polyArr33.push(fp);
          var stop = inArray(stops, stopid);
          var gr = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 5,
            strokeColor: 'black',
            strokeWeight: 4
          };
          var fp = new MarkerWithLabel({
            position: new google.maps.LatLng(stop.lat, stop.lng),
            draggable: false,
            icon: gr,
            labelContent: stop.stop,
            labelAnchor: new google.maps.Point(-12, 18),
            labelClass: 'trm',
            labelStyle: {
              opacity: 0.8
            }
          });
          fp.setMap(map33);
          polyArr33.push(fp);

          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(pos) {
              var gr = {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 2,
                strokeColor: 'red',
                strokeWeight: 4
              };
              var fp = new MarkerWithLabel({
                position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                draggable: false,
                icon: gr,
                labelContent: "YOU",
                labelAnchor: new google.maps.Point(-12, 18),
                labelClass: 'stp',
                labelStyle: {
                  opacity: 0.8
                }
              });
              fp.setMap(map33);
              polyArr33.push(fp);
            });
          }

        },
        200);
    } else {
      setTimeout(function() {
          for (var i = 0; i < polyArr33.length; i++) {
            polyArr33[i].setMap(null);
          }
          polyArr33 = [];
          croute = inArray(routes, routeid);
          var pts = [];
          var bounds = new google.maps.LatLngBounds();
          var vertices = croute.pts;
          var verticesArray = vertices.split("|");
          for (k = 0; k < verticesArray.length; k++) {
            var ll = verticesArray[k].split(",");
            var point = new google.maps.LatLng(ll[1], ll[0]);
            pts.push(point);
            bounds.extend(point);
          }
          var poly = new google.maps.Polyline({
            path: pts,
            strokeColor: "red",
            strokeOpacity: 0.6,
            strokeWeight: 5
          });
          polyArr33.push(poly);
          poly.setMap(map33);
          map33.fitBounds(bounds);
          for (w = 0; w < croute.stops.length; w++) {
            var gr = {
              path: google.maps.SymbolPath.CIRCLE,
              scale: 5,
              strokeColor: 'red',
              strokeWeight: 4
            };
            var fp = new MarkerWithLabel({
              position: new google.maps.LatLng(croute.stops[w].lat, croute.stops[w].lng),
              draggable: false,
              icon: gr,
              labelContent: croute.stops[w].name,
              labelAnchor: new google.maps.Point(-12, 18),
              labelClass: 'stp',
              labelStyle: {
                opacity: 0.8
              }
            });
            fp.setMap(map33);
            polyArr33.push(fp);
          }
          var start = inArray(stops, startid);
          var gr = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 5,
            strokeColor: 'black',
            strokeWeight: 4
          };
          var fp = new MarkerWithLabel({
            position: new google.maps.LatLng(start.lat, start.lng),
            draggable: false,
            icon: gr,
            labelContent: start.stop,
            labelAnchor: new google.maps.Point(-12, 18),
            labelClass: 'trm',
            labelStyle: {
              opacity: 0.8
            }
          });
          fp.setMap(map33);
          polyArr33.push(fp);
          var stop = inArray(stops, stopid);
          var gr = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 5,
            strokeColor: 'black',
            strokeWeight: 4
          };
          var fp = new MarkerWithLabel({
            position: new google.maps.LatLng(stop.lat, stop.lng),
            draggable: false,
            icon: gr,
            labelContent: stop.stop,
            labelAnchor: new google.maps.Point(-12, 18),
            labelClass: 'trm',
            labelStyle: {
              opacity: 0.8
            }
          });
          fp.setMap(map33);
          polyArr33.push(fp);
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(pos) {
              var gr = {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 2,
                strokeColor: 'red',
                strokeWeight: 4
              };
              var fp = new MarkerWithLabel({
                position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                draggable: false,
                icon: gr,
                labelContent: "YOU",
                labelAnchor: new google.maps.Point(-12, 18),
                labelClass: 'stp',
                labelStyle: {
                  opacity: 0.8
                }
              });
              fp.setMap(map33);
              polyArr33.push(fp);
            });
          }
        },
        200);
    }
  };

Plz帮助将此值传递到新的HTML页面#page321。

为什么不为路由id创建一个数组,并将所有路由id保存在该数组中。这样它就不会被重置,你可以很容易地将它传递到另一个页面。