2017-05-25 10 views
0

javascriptで3つの関数がMVC.NETビューに表示されていますが、上から下には表示されません。インデックスビュー、jqueryの関数が間違った順序で実行されています

  1. 私たちのテーブルから都市を取得し、配列にプッシュします。オープン・ウェザー・マップAPIと呼ばれる次の関数のために、url+cit+keyというURLも作成されていません。

  2. 温度データを取得するには、新しいURL:sを使用して天気予報地図を呼び出します。

  3. 天気予報地図からの気象データは、情報ウィンドウとコンテンツに表示され、マーカーがクリックされたときに後で印刷されます。

第2の関数は毎回最初の関数の前に実行されますが、さまざまなことを試みましたが、何も機能していません。私たちは何ができる?

@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

この方法のようなものを定義していない理由は本当に曖昧であるドキュメントの準備で実行するように他のコードを登録する機能MYMAP最初にコールする必要があるということ可能な重複:[非同期呼び出しからの応答を返すにはどうすればいいですか?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – abhishekkannojia

+0

OMGでは、 'function'の' document.ready'の 'function'に' document.ready'があります。実行が完全に乱れているのは不思議ではありません。 1つのメイン 'document.ready'を作成し、内部にすべての関数を入れます。文書は1度だけ準備ができています。 –

+0

BTW '$(document).ready('は '$(function(){'と同じです(後者は省略形です) –

答えて

0

あなたは準備ができて関数に2を持っている理由は、これが少ないことを意味して、あなたが$(document).ready(function() {
の内側に「getCities」関数を定義するとき、それは

他の事を動作しないでしょう

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

を入れ子この機能の範囲を制限します

以上定義したもの以上$(document).ready「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)); 


      }) 
     }) 

}); 
関連する問題