javascript - 从 Json 数据异步加载 Google map 标记

Question

目前我正在加载带有数百个标记的 map 。这仅适用于少数属性。但是，当我尝试加载许多标记时，页面会在加载数据时卡住。

在初始化函数中，我正在加载 map 并创建标记。

var map;
var markers = [];

function initialize(id) {

    // setup the map
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 13,
        center: new google.maps.LatLng(lat, lon),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // wait for loaded and add markers
    google.maps.event.addListener(map, 'idle', function () {
        if (checkevent == false) {
            createPropertyMarkers(); // add the markers
        }            
    });
}
// end map

通过这个函数，我添加了标记。

// create the property markers
function createPropertyMarkers() {
    var bounds = map.getBounds();
    //alert(bounds);

    // loop through the json and get property data
    for (var i = 0; i < markersdata.d.length; ++i) {
        // set marker zindex
        var zindex = 1;

        // set the marker position
        var latLng = new google.maps.LatLng(markersdata.d[i].lat,
            markersdata.d[i].lon);

        // set icon for property
        var micon = '/images/home-2.png';
        if (markersdata.d[i].count > 0) {
            micon = '/images/home.png';
        }

        // set the main proerty marker to blue.
        if (GetQueryStringParams('id') == markersdata.d[i].id) {
            micon = '/images/homeBlue.png';
            zindex = 10;
        }

        // drop the marker
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: markersdata.d[i].address,
            zIndex: zindex,
            icon: micon
        });
        // set the marker 
        iwcontent = '<div id=\"content\" style=\"margin: 5px ; padding: 0; width: 220px; min-height: 250px;\">' +
            '<h2 id=\"firstHeading\" class=\"firstHeading\" style=\"margin: -5px 0 1px 0; padding: 0;\">Property</h2>' +
            '<div id=\"bodyContent\">' +
            '<img src=\"/images/ajax-loader.gif\" alt=\"wait\" style=\"margin: 5px 0; padding: 0;\" /><br /><h3>Loading Info</h3><br /><br /><br /></div>' +
            '<div id=\"propertyentityinfo\">' +
            '</div></div>'
        ;

        // add listener to open marker infowindow
        attachListener(marker, iwcontent, markersdata.d[i].id);
        // push markers to array
        markers.push(marker);

        //document.getElementById("testResults").innerHTML += i + " " + bounds.toString() + " - " + markersdata.d[i].lat + "," + markersdata.d[i].lon + " <br />";
    }
    // end loop
}

// load property markers
markersdata = getPropertyMarkers(GetQueryStringParams('id'));

在这里，我为将打开信息窗口并显示数据的图标添加单击监听器。

// add the listener to the property markers
function attachListener(marker, content, id) {
    google.maps.event.addListener(marker, "click", function () {
        //infowindow.close();
        checkevent = true;
        infowindow.setContent(content);
        map.setCenter(marker.getPosition());
        infowindow.open(map, this);
        setTimeout(function () {
            loadPropertyInfo(id); // load infowindow data
            checkevent = false;
        }, 1000);
        //setTimeout('checkevent = false', 3000);
    });
}

现在问题来了。在我的函数中，从我的网络服务获取 json 数据。我使用 async: false 来让它工作。如果我把它拿出来，标记将不会加载。然而，当设置为 false 时，它​​也会导致网页等待数据进入。

如何修改我的代码以使其异步工作？

// get markers for loading
function getPropertyMarkers(propertyid) {
var mydata;

$.ajax({
    url: "Service/MapData.asmx/getPropertyMarkers",
    type: "POST",
    data: "{'id': '" + propertyid + "'}",
    async: false, <----------------- THE PROBLEM!
    cache: true,
    contentType: "application/json;",
    dataType: "json",
    success: function (data, textStatus, jqXHR) { //
        mydata = data;
        //initialize(propertyid);
    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
        console.log(xmlHttpRequest.responseText);
        console.log(textStatus);
        console.log(errorThrown);
        alert("Screen shot this error: " + xmlHttpRequest.toString() + " " + textStatus.toString() + " " + errorThrown.toString());
    }
});
return mydata;
}

Answer 1

在 JSON 请求的回调中调用 createPropertyMarkers 函数(“成功”函数)，我建议将返回的 json 传递到该函数中，而不是(或者除了)使其成为全局函数.

// get markers for loading
function getPropertyMarkers(propertyid) {
  var mydata;

  $.ajax({
    url: "Service/MapData.asmx/getPropertyMarkers",
    type: "POST",
    data: "{'id': '" + propertyid + "'}",
    async: true,
    cache: true,
    contentType: "application/json;",
    dataType: "json",
    success: function (data, textStatus, jqXHR) { //
        mydata = data;
        createPropertyMarkers(); 
        //initialize(propertyid);
    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
        console.log(xmlHttpRequest.responseText);
        console.log(textStatus);
        console.log(errorThrown);
        alert("Screen shot this error: " + xmlHttpRequest.toString() + " " + textStatus.toString() + " " + errorThrown.toString());
    }
  });
}