2013-10-30 119 views
1

我有一個問題,因爲我想用這個JSON結果返回JSON列表,但我的問題是我應該如何調用JSON結果,我將使用地理編碼和添加標記我的Google地圖?我用的getJSON及其不正常,但我不還沒試過在阿賈克斯功能Json結果MVC控制器到谷歌地圖通過Jquery

這裏是我的代碼集:

<script type="text/javascript"> 
    var geocoder; 
    var map; 

    function initialize() { 
     var minZoomLevel = 4; 
     var zooms = 7; 
     geocoder = new google.maps.Geocoder(); 

     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: minZoomLevel, 
      center: new google.maps.LatLng(38.50, -90.50), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     // Bounds for North America 
     var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(15.70, -160.50), 
    new google.maps.LatLng(68.85, -55.90) 
    ); 

     // Listen for the dragend event 
     google.maps.event.addListener(map, 'dragend', function() { 
      if (strictBounds.contains(map.getCenter())) return; 

      // We're out of bounds - Move the map back within the bounds 

      var c = map.getCenter(), 
     x = c.lng(), 
     y = c.lat(), 
     maxX = strictBounds.getNorthEast().lng(), 
     maxY = strictBounds.getNorthEast().lat(), 
     minX = strictBounds.getSouthWest().lng(), 
     minY = strictBounds.getSouthWest().lat(); 

      if (x < minX) x = minX; 
      if (x > maxX) x = maxX; 
      if (y < minY) y = minY; 
      if (y > maxY) y = maxY; 

      map.setCenter(new google.maps.LatLng(y, x)); 
     }); 


     // Limit the zoom level 
     google.maps.event.addListener(map, 'zoom_changed', function() { 
      if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); 
     }); 


    } 
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
    function codeAddress() { 
     var infowindow = new google.maps.InfoWindow(); 
    $.getJson("Dashboard/DashboardIndex",null , function(address) { 

     $.each(address, function() { 
      var currVal = $(this).val(); 
      address.each(function() { 
       geocoder.geocode({ 'address': currVal }, function (results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 

         map.setCenter(results[0].geometry.location); 
         var marker = new google.maps.Marker({ 
          map: map, 
          icon: iconBase + 'man.png', 
          position: results[0].geometry.location, 
          title: currVal 
         }) 


         google.maps.event.addListener(marker, 'click', (function (marker, i) { 
          return function() { 
           infowindow.setContent(currVal); 
           infowindow.open(map, marker); 
          } 
         })(marker, currVal)); 
         address.push(marker); 
        } 
        else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) { 
         setTimeout(codeAddress, 2000); 
        } 
        else { 
         alert("Geocode was not successful for the following reason: " + status); 
        } 
        }); 
}); 
       }); 
      }); 
     return false; 
    } 

    window.onload = function() { 
     initialize(); 
     codeAddress(); 

    } 
</script> 

而且我JsonResult在我的控制器

public JsonResult LoadWorkerList() 
    { 
     var workerList = new List<Worker_Address>(); 

     // check if search string has value 
     // retrieve list of workers filtered by search criteria 
     var list = (from a in db.Worker_Address 
        where a.LogicalDelete == false 
        select a).ToList(); 



     List<WorkerAddressInfo> wlist = new List<WorkerAddressInfo>(); 
     foreach (var row in list) 
     { 
      WorkerAddressInfo ci = new WorkerAddressInfo 
      { 
       ID = row.ID, 
       Worker_ID = row.WorkerID, 
       AddressLine1 = row.Address_Line1 + " " + row.Address_Line2+ " " +row.City + " "+ GetLookupDisplayValById(row.State_LookID), 
       LogicalDelete = row.LogicalDelete 

      }; 
      wlist.Add(ci); 
     } 


     return Json(wlist.ToList().OrderBy(p => p.AddressLine1), JsonRequestBehavior.AllowGet); 
    } 

林感謝一些誰可以提前幫助我:)

+0

控制檯中的任何錯誤?如果您使用Chrome,則可以按F12打開控制檯,如果您使用Firefox,則可以按Ctrl + Shift + k(或安裝Firebug插件並按F12)。如果發出XHR請求,它們應顯示在控制檯中以及響應代碼和響應標頭(點擊它) – HMR

+0

我想知道的一件事是:var currVal = $(this).val ();如果我正確理解代碼,則此值應引用JSON數據。你可以發佈以下輸出:'console.log(this);'?把它放在currVal之前。 – HMR

+0

@HMR未捕獲TypeError:無法調用未定義的方法'toLowerCase' 它在$ .each上的錯誤(地址,函數(){ –

回答

0

很難猜出它出錯的地方,因爲您沒有發佈JSON格式並且沒有發佈錯誤代碼(toLowerCase)。我認爲這是在以下領域:

function codeAddress() { 
     var infowindow = new google.maps.InfoWindow(); 
    $.getJson("Dashboard/DashboardIndex",null , function(address) { 
     console.log("full json object",address);//<--should show an array of objects 
     $.each(address, function() { 
      console.log(this);//<--here you can see what the JSON object is 
      var currVal = this["AddressLine1"];//<--guess from what your C# code looks like 
      //next each doesn't make much sense unless you have an array of arrays 
      // but the C# code makes json for a list (not a list of lists) 

您可以使用IE瀏覽器的控制檯輸出,但也懶得在這裏張貼的輸出,因爲我已經可以告訴你,這將是[對象,對象。要獲得有用的信息,你將不得不使用Firefox與螢火蟲或Chrome。要查看您可以按F12控制檯

行:

setTimeout(codeAddress, 2000); 

難道因爲現在進行優化時,你在做太多的要求,你會再次獲取整個地址列表,然後從頭開始,而不是啓動「等待」2秒,然後繼續你的位置。

下面的代碼:

map.setCenter(results[0].geometry.location); 

爲什麼設置環路內的地圖的中心?它只會以最後找到的地址爲中心,因此您最好在循環外部將中心設置爲上次找到的地址。

+0

我覺得這很有幫助和正確的答案,但我沒有聲望upvote this !!謝謝先生HMR !! 我覺得這行更正了我'var currVal = this [「AddressLine1」];' –

+0

@RenTao不用擔心漲票,很高興聽到它解決了你的問題。 – HMR