使用jQuery加载JSON并在传单中使用

p8h8hvxi  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(80)

我有以下传单代码:

<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;
});

我需要帮助来混合这两个脚本块。有人能帮我把这些药混在一起吗?

fafcakar

fafcakar1#

https://github.com/stefanocudini/leaflet-layerJSON
这个插件做了你需要的,你可以使用jQuery Ajax方法或者使用它自己的aplogs/jsonp请求,而不包括jquery!
使用示例:

var l = new L.LayerJSON({url: "Ajax/MyService.svc/GetCityCoordinates?lat1={lat1}&lat2={lat2}&lon1={lon1} lon2={lon2}" });
map.addLayer(l);
7hiiyaii

7hiiyaii2#

我想我可以这样做:

$("#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;
});

相关问题