2017-05-25 45 views
0

我在我的MVC.NET視圖中有3個函數在JavaScript中運行錯誤的順序,而不是從頂部到底部。索引視圖,在錯誤的順序運行的jquery中的函數

  1. 我們從我們的表中獲取城市並推送到一個數組。也沒有爲下一個功能創建網址:我們稱url+cit+key爲開放式天氣地圖API。

  2. 使用新的URL調用天氣圖以獲取溫度數據。

  3. 來自開放天氣地圖的天氣數據應該放在信息窗口和內容中,以便稍後在單擊標記時打印。

第二個函數每次都在第一個函數之前運行,我們嘗試了很多不同的東西,但沒有任何工作。我們可以做什麼?

@model List<IDAbroad.Models.PeopleModell> 

@ViewData["Listan"] 
@ViewBag.message 

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 

<div id="map" style="width:100%;height:600px"></div> 

<script> 
function myMap() { 

    var myCenter = new google.maps.LatLng(51.508742, -0.120850); 
    var mapOptions = { center: myCenter, zoom: 2 }; 
    var mapCanvas = document.getElementById("map"); 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
    var cities = []; 


    $(document).ready(function() { 

     var url = '/People/myJson'; 
     var url2 = []; 
     var url; 
     var data; 
     var string = ""; 
     var lat = []; 
     var lon = []; 
     var namn; 
     var i = 1; 
     var temp = []; 
     var description = []; 
     var wIcon = []; 

     $(function() {    
      $.getJSON(url, function (data) { 
       $.each(data, function() { 
        //cities[i] = this['City']; 
        cities.push(this['City']); 
        url2.push('http://api.openweathermap.org/data/2.5/weather?q=' + this['City'] + '&APPID=MYKEY'); 

        console.log("Första loopen: " + this['City']); 

        i++; 
       }); 

       console.log("Hela listan med städer: " + cities + '<br>' + " HEEEEEEEEJ" + url2 + '<br>'); 
      }); 
      alert("Ska va etta"); 
      getCities(); 
     }); 

     function getCities() { 
      $(function() { 
       console.log("Url 2 längd: " + url2.length); 

       for (var i = 1; i <= url2.length; i++) { 
        alert("kom in"); 
        var url3 = url2[i] 

        $.getJSON(url3, function (data) { 
         $.each(data, function() { 

          temp[i] = this['main.temp']; 
          description[i] = this['description']; 
          wIcon[i] = this['icon']; 
          console.log("temperatur: " + temp[i]); 

         }) 
        }); 
       } 
      }); 

     }; 



      var i = 1; 

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

       $.each(data, function() { 
        namn = this['Firstname']; 

        console.log("Position X: " + lat[i]); 
        console.log("Position Y: " + lon[i]); 
        var peoplePosition = new google.maps.LatLng(this['Latitude'], this['Longitude']); 
        var ico = { 
         url: "/profileImg/" + i + ".jpg", 
         scaledSize: new google.maps.Size(35,50) 
        } 
        var marker = new google.maps.Marker({ 
         position: peoplePosition, 
         icon: ico 

        }) 
        i++; 
        marker.setMap(map); 
        var content = this['Firstname'] + '<br>Stad: ' + this['City'] + '<br>Temp: ' + temp[i] + '<br>' + description[i]; 
        var infowindow = new google.maps.InfoWindow() 
        google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) { 

         return function() { 
          infowindow.setContent(content); 
          infowindow.open(map, marker); 
         }; 
        i++  
        })(marker,content,infowindow)); 


       }) 
      }) 
     }); 
    }); 
} 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=MYSECONDKEY"> 
</script> 
+0

東西可能的重複:[如何從異步調用返回響應?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – abhishekkannojia

+0

在OMG中,''''''''''''''''''''''''''''''''''''''''函數中的'document.ready',難怪你的執行是完全搞砸的。創建一個主要的'document.ready',並將所有的函數放在裏面。該文件只准備一次。 –

+0

順便說一句'$(document).ready('與'$(function(){'(後者是一個簡寫)'相同) –

回答

0

爲什麼你有2個現成的函數嵌套

$(document).ready(function() { 
... 
    $(function() {  

這意味着少,這是行不通的

其他的事情,當你定義內$(document).ready(function() {
「getCities」功能你限制這個功能的範圍

更重要的是你已經定義了整個你的$(document).ready「的內部MYMAP()」功能,這意味着你必須首先調用函數MYMAP註冊您的其他代碼在文檔準備運行,這實在是不明確的,爲什麼你不只是像這樣定義方式

var myCenter = new google.maps.LatLng(51.508742, -0.120850); 
var mapOptions = { center: myCenter, zoom: 2 }; 
var mapCanvas = document.getElementById("map"); 
var map = new google.maps.Map(mapCanvas, mapOptions); 
var cities = []; 

function getCities() { 

       console.log("Url 2 längd: " + url2.length); 

       for (var i = 1; i <= url2.length; i++) { 
        alert("kom in"); 
        var url3 = url2[i] 

        $.getJSON(url3, function (data) { 
         $.each(data, function() { 

          temp[i] = this['main.temp']; 
          description[i] = this['description']; 
          wIcon[i] = this['icon']; 
          console.log("temperatur: " + temp[i]); 

         }) 
        }); 
       } 
} 
$(document).ready(function() { 

    var url = '/People/myJson'; 
    var url2 = []; 
    var url; 
    var data; 
    var string = ""; 
    var lat = []; 
    var lon = []; 
    var namn; 
    var i = 1; 
    var temp = []; 
    var description = []; 
    var wIcon = []; 


     $.getJSON(url, function (data) { 
      $.each(data, function() { 
       //cities[i] = this['City']; 
       cities.push(this['City']); 
       url2.push('http://api.openweathermap.org/data/2.5/weather?q=' + this['City'] + '&APPID=MYKEY'); 

       console.log("Första loopen: " + this['City']); 

       i++; 
      }); 

      console.log("Hela listan med städer: " + cities + '<br>' + " HEEEEEEEEJ" + url2 + '<br>'); 
     }); 
     alert("Ska va etta"); 
     getCities(); 





     var i = 1; 


     $.getJSON(url, function (data) { 

      $.each(data, function() { 
       namn = this['Firstname']; 

       console.log("Position X: " + lat[i]); 
       console.log("Position Y: " + lon[i]); 
       var peoplePosition = new google.maps.LatLng(this['Latitude'], this['Longitude']); 
       var ico = { 
        url: "/profileImg/" + i + ".jpg", 
        scaledSize: new google.maps.Size(35,50) 
       } 
       var marker = new google.maps.Marker({ 
        position: peoplePosition, 
        icon: ico 

       }) 
       i++; 
       marker.setMap(map); 
       var content = this['Firstname'] + '<br>Stad: ' + this['City'] + '<br>Temp: ' + temp[i] + '<br>' + description[i]; 
       var infowindow = new google.maps.InfoWindow() 
       google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) { 

        return function() { 
         infowindow.setContent(content); 
         infowindow.open(map, marker); 
        }; 
       i++  
       })(marker,content,infowindow)); 


      }) 
     }) 

}); 
相關問題