使用jQuery加載JSON和傳單

Question

使用我有以下的單張代碼：

<script> 
    var lat = '<%=_city.Gps.Latitude.ToString(CultureInfo.InvariantCulture) %>'; 
    var lon = '<%=_city.Gps.Longitude.ToString(CultureInfo.InvariantCulture) %>'; 

    var map = L.map('map').setView([lat, lon], 8); 
    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { 
     maxZoom: 18, 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' 
    }).addTo(map); 

    L.circle([lat, lon], 15000, { 
     color: 'orange', 
     fillColor: '#f03', 
     fillOpacity: 0.5 
    }).addTo(map).bindPopup("XXXX."); 

    var popup = L.popup(); 

    function onMapClick(e) { 
     popup 
      .setLatLng(e.latlng) 
      .setContent("You clicked the map at " + e.latlng.toString()) 
      .openOn(map); 
    }  
</script> 

我想提出一個AJAX調用，讓我數據JSON。我怎樣才能在這個傳單腳本中加入JQuery？

這是我的AJAX調用是什麼樣子：

$("#mymap").load(function() { 
    $.getJSON("Ajax/MyService.svc/GetCityCoordinates", function (response) { 
     var d = JSON.parse(response.d); 
     // Use leaflet code to mark the cities.... 
    return false; 
}); 

我需要幫助混合這兩個腳本塊。有人可以幫助我如何混合這些scipt？

Answer 1

http://labs.easyblog.it/maps/leaflet-layerjson/

這個插件確實你需要什麼，你可以使用jQuery AJAX方法或使用自己的AJAX/JSONP請求，而不包括jQuery的！

Answer 2

我想我能做到這一點：

$("#mymap").load(function() { 
    $.getJSON("Ajax/MyService.svc/GetCityCoordinates", function (response) { 
     var d = JSON.parse(response.d); 

     var map = L.map('map').setView([lat, lon], 8); 
     L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { 
      maxZoom: 18, 
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' 
     }).addTo(map); 

     L.circle([lat, lon], 15000, { 
      color: 'orange', 
      fillColor: '#f03', 
      fillOpacity: 0.5 
     }).addTo(map).bindPopup("XXXX."); 

     var popup = L.popup(); 

     function onMapClick(e) { 
      popup 
       .setLatLng(e.latlng) 
       .setContent("You clicked the map at " + e.latlng.toString()) 
       .openOn(map); 
     } 
    return false; 
});