如何在执行上一个函数后运行函数

时间:2017-06-13 18:47:42

标签: javascript jquery html google-maps

所以我一直在网站上工作,从谷歌单元格获取一些信息,并使用它来为谷歌地图叠加层着色。我遇到的问题是,在检索单元格信息之前,地图叠加层似乎正在运行。我不确定如何让地图叠加层等到它有所需的信息。

最终我将不得不获得多个单元格值,因此每次运行getCell()时都不想调用我的地图,因此我不会将myMap()放在$ .getJSON的done()中

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<style type="text/css">

</style>

<script>
  /** This is the ID of the google sheet **/

  //This is the google sheet ID of the google sheet with the graphs for the event.
  var theSheetID = "1eAP6dugifHIHRSgnc8Mx-FdzriDBP5r0vn8yq0ShknA";

  var typeOfEvent = "Event";
  var eventManager = "Jeb";
  var managerCell = "123-456-789";

  //This is the google sheet ID of the google sheet with the lot values for the event.
  var theMapSheetID = "1oUW8EvxlSMArW1qTQMxVJua1QrgCOgo5G545Jb4OZ-4";
  var workSheetID = "default";

  //duplicate these for every cell you are want to access
  var theRow = "1";
  var theColumn = "1";


  //make duplicates of this variable for each lot you have
  //i.e. lot
  var theLot;

  var theLot1;

  //theLot=20;

  $(document).ready(function() {
    getCell = function() {
      var api = 'https://spreadsheets.google.com/feeds/cells/';
      var spreadsheet = theMapSheetID;
      var worksheet = workSheetID;

      var row = theRow;
      var col = theColumn;

      var row1 = 2;
      var col2 = 2;

      var url = api + spreadsheet + '/' + worksheet + '/public/basic/R' + row + 'C' + col + '?alt=json';

      $.getJSON(url)
        .done(function(data) {

          console.log(data)

          if (data.entry) {

            theLot = parseInt(data.entry.content['$t']);
            //	return $.Deferred();
            //myMap();

          } else {}
        })
        .fail(function() {});
    }
    //$.when(getCell()).then(myMap());
    //myMap();

  });
</script>

<script>
  function myMap() {
    //theLot = 15;
    var p1 = new google.maps.LatLng(41.051651, -75.515626);
    var p2 = new google.maps.LatLng(41.048082, -75.521755);
    var p3 = new google.maps.LatLng(41.048006, -75.522286);
    var p4 = new google.maps.LatLng(41.051565, -75.5288822);
    var p5 = new google.maps.LatLng(41.056059, -75.523349);
    var p6 = new google.maps.LatLng(41.053316, -75.520697);





    var mapCanvas = document.getElementById("map");
    var mapOptions = {
      center: p2,
      zoom: 15
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
    //      var map = new google.maps.Map(document.getElementById("googleMap"),mapOptions);

    var theColor;

    //alert(theLot);

    var myCenter = new google.maps.LatLng(41.051629, -75.522953);
    var marker = new google.maps.Marker({
      position: myCenter
    });
    marker.setMap(map);

    var infowindow = new google.maps.InfoWindow({
      content: theLot.toString()
    });
    infowindow.open(map, marker);




    if (theLot < 25) {
      theColor = "#ff0000";
    } else if (theLot > 25 && theLot < 50) {
      theColor = "#fff200";
    } else if (theLot > 50 && theLot < 75) {
      theColor = "#aaff00";
    } else {
      theColor = "#00ff00";
    }

    var lotOverlay = new google.maps.Polygon({
      path: [p1, p2, p3, p4, p5, p6],
      strokeColor: "#000000",
      strokeOpacity: 0.0,
      strokeWeight: 2,

      
      fillColor: theColor,

      
      fillOpacity: 0.5
    });

    lotOverlay.setMap(map);
  }
</script>


<body>

  <br />
  <br />

  <div class="container">
    
  </div>

  <br />

  <div class="container" style="text-align:center; max-width: 42em;">
    <div class="jumbotron">

      <!-- Event Name -->
      <div align="center">

        <h2>Graduation 2017</h2>

        <h4>Please contact us for more detailed information:</h4>

        <script type="text/javascript">
          document.write("<h4>" + typeOfEvent + " Manager: " + eventManager + "</h4><br />");

          document.write(" <div class=\"row\"> <a href=\"tel:" + managerCell + "\" class=\"btn-primary btn-lg btn-success\">Call</a> &nbsp <a href=\"sms:" + managerCell + "\" class=\"btn-primary btn-lg btn-info\">Text</a></div>");
        </script>
      </div>
    </div>

    <!-- Link to ELP -->
    <a href="ELP/ELP.pdf" class="btn btn-primary btn-lg" role="button">View Event Logistics Plan (ELP)</a>

  </div>

  <hr width="100%" size="3" color="#0000FF" />

  <div class="container" align="Center">

    <div class="row">

      <div class="col-lg-6">
        <!-- Google Sheet Overview -->
        <script type="text/javascript">
          document.write("<iframe src=\"https://docs.google.com/spreadsheets/d/" + theSheetID + "/pubchart?oid=784983700&amp;format=interactive&chrome=false\"  width=\"600\"  height =\"400\" frameborder=\"0\"></iframe>");
        </script>
      </div>

      <div class="col-lg-6">
        <!-- Google Sheet Flow -->
        <script>
          document.write("<iframe src=\"https://docs.google.com/spreadsheets/d/" + theSheetID + "/pubhtml?gid=225087979&amp;single=true&amp;headers=false&chrome=false\" width=\"600\"  height =\"400\" frameborder=\"0\"></iframe>");
        </script>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <!-- Google Sheet Deatils -->

        <script>
          document.write("<iframe src=\"https://docs.google.com/spreadsheets/d/" + theSheetID + "/pubhtml?gid=328375376&gridlines=false&range=a1:l20&chrome=false\" width = \"1000\" height =\"600\" frameborder=\"0\"></iframe>");
        </script>
      </div>
      <div class="col-lg-12">
        <div id="map" style="width:80%;height:500px"></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfWJMAiVJy9LcuMF_vogE_KawTRFaFxig&callback=myMap"></script>
      </div>
    </div>
  </div>




  <br />
  <br />



</body>





</html>

1 个答案:

答案 0 :(得分:0)

  

JavaScript语句逐行执行。但是,通过效果,即使效果未完成,也可以运行下一行代码。这可能会造成错误。

为防止这种情况,您可以创建回调函数。它只是,您可以将函数作为参数传递,它将在最后执行。

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

https://www.w3schools.com/jquery/jquery_callback.asp

如果您要这样称呼它,那么您可以在隐藏完成执行之前获得警报。

 $("button").click(function(){
        $("p").hide("slow");
        alert("The paragraph is now hidden");
  });