Google Maps Cluster IE8问题

Question

The below code works fine on firefox and IE9, but having issue updating the markers on IE8. i get "SCRIPT16389: Unspecified error. main.js, line 20 character 313" and the markers once crated are not updating with the new set of data

my newdata.json format is

 {
    "points": [
        {
            "lat": "-28.0000",
            "long": "133.1500",
            "id": 0
        },
        {
            "lat": "-28.4710",
            "long": "153.3443",
            "id": 1
        }
    ]
}

and below is the script to get the json and use clustering to display the points

var map=null;
var markersArray = [];
var markerCluster= null;
google.load('maps', '3', {
        other_params: 'sensor=true'
});
google.setOnLoadCallback(initialize);

function initialize() {
    var mapcentre = new google.maps.LatLng(-29,135);
    var mapOptions = {
        zoom: 5,
        center: mapcentre,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    startTimer();
}

function startTimer(){
    setInterval(function() {
        deleteOverlays();//should delete any existing point and clear the cluster
        addMarker();
    },3000);
}

function addMarker() {
        $.ajax({
            type: "GET",
            url: "newdata.json",
            async: false,
            dataType: "json",
            success: function(data){
                for (var i = 0, dataPoint; dataPoint = data.points[i]; i++) {
                    var latLng = new google.maps.LatLng(dataPoint.lat,dataPoint.long);
                    var marker = new google.maps.Marker({
                            position: latLng
                    });
                    markersArray.push(marker);
                }           

                markerCluster = new MarkerClusterer(map, markersArray);
            } 


        });
}


// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray.length > 0) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
  if(markerCluster!= null) {
       markerCluster.clearMarkers();
  }
}

on IE8 the maps loads fine and the intial data is displaying fine, but the new data is not updated so i guess something wrong with deleteOverlays ?

the above example is based on http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/advanced_example.html?compiled

Answer 1

Well one thing that is very wrong is that for/in loops are intended for objects and not arrays. I've always hated IE but more and more often nowadays it seems to be the one that breaks when I wish everybody else would. It might be breaking on that. What tends to happen in these fancy new JIT young whippersnapper browsers is that they will hit all the keys but also all the array properties which is idiotic, IMO. This is a typing light and much more efficient way to loop through an array (keep in mind it goes backwards):

var i = markersArray.length
while(i--){
    markersArray[i].setMap(null);
}

If it's not this, check on the HTML. If you have busted up HTML the other browsers might be smart enough to figure out how to piece it together (again, too smart IMO) whereas IE8 will kick the bucket like a canary at ground zero of the manhattan project.

And no, really, stop using for/in on arrays. Even when it works it can be a complete mess.

Answer 2

Adding cache:false, triggered IE8 to always get the latest json and updated the markers as intended.

 function addMarker() {
    $.ajax({
        type: "GET",
        url: "newdata.json",
        async: false,
        cache: false,
        dataType: "json",
        success: function(data){
            for (var i = 0, dataPoint; dataPoint = data.points[i]; i++) {
                var latLng = new google.maps.LatLng(dataPoint.lat,dataPoint.long);
                var marker = new google.maps.Marker({
                        position: latLng
                });
                markersArray.push(marker);
            }           

            markerCluster = new MarkerClusterer(map, markersArray);
        } 


    });

}