所以我一直在网站上工作,从谷歌单元格获取一些信息,并使用它来为谷歌地图叠加层着色。我遇到的问题是,在检索单元格信息之前,地图叠加层似乎正在运行。我不确定如何让地图叠加层等到它有所需的信息。
最终我将不得不获得多个单元格值,因此每次运行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>   <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&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&single=true&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>
答案 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");
});