0

可能重复：
谷歌地图API实时更新新geojson文件

由于某种原因，当多边形重新生成时，它们仍在使用 json_template.json。我想用 json_template1.json 刷新。我认为这与我的ajax有关。

任何帮助是极大的赞赏。

谢谢

    var map;

    function initialize() { 
        var kansas_city = new google.maps.LatLng(39.316858,-94.963194);
        var mapOptions = {
        zoom: 13,
        center: kansas_city,
        mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        google.maps.event.addListener(map, 'tilesloaded', function() {
            setTimeout(function() { removeSectors() }, 1000);
            setTimeout(function() { updateMap() }, 2000);
            });     
    }

    function removeSectors() {
        if ( allPolygons ) {
            for ( i = 0; i < allPolygons.length; i++ ) {
                allPolygons[i].setMap(null);
            }
        allPolygons.length = 0;
        }
    }

    var data;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'json_template.json', true);
    xhr.onload = function() {
        data = JSON.parse(xhr.responseText)
        sector_callback(data);
    };
    xhr.send();

    function updateMap() {
        var data;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'json_template1.json', true);
        xhr.onload = function(response) {
            data = JSON.parse(response.responseText)
            sector_callback(data);
        };
        xhr.send();
    }

    function createClickablePoly(poly, html) {
    google.maps.event.addListener(poly, 'click', function(evt) {
        infowindow.setContent(html);
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
        });
    }
    var infowindow = new google.maps.InfoWindow({});        

    function sector_callback() {
        var bounds = new google.maps.LatLngBounds();        
        for (var i = 0, len = data.features.length; i < len; i++) {
            var coords = data.features[i].geometry.coordinates[0];
            siteNames = data.features[i].properties.Name; // added for site names
            var path = [];
        for ( var j = 0, len2 = coords.length; j < len2; j++ ){ // pull out each     set of coords and create a map object
            var pt = new google.maps.LatLng(coords[j][1], coords[j][0])
            bounds.extend(pt);
            path.push(pt);

        }

        var polygons = new google.maps.Polygon({
        path: path,
            strokeColor: "#000000",
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: "#000000",
            fillOpacity: 0.35,
        map: map
        });
        createClickablePoly(polygons, siteNames);
        //console.debug(siteNames);

        google.maps.event.addListener(polygons, 'mouseover', function() {
        var currentPolygon = this;

        currentPolygon.setOptions({ 
            fillOpacity: 0.45,
            fillColor: "#FF0000"
            })
        });

        google.maps.event.addListener(polygons, 'mouseout', function() {
        var currentPolygon = this;
        currentPolygon.setOptions({ 
            fillOpacity: 0.35,
            fillColor: "#000000"
            })
        });

        allPolygons.push(polygons);
        }
    }
    var allPolygons = [];
4

1 回答 1

1

xhr.onload = function()必须接收一个参数，例如：

function updateMap() {
        var data;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'json_template1.json', true);
        xhr.onload = function(request) {
            data = JSON.parse(request.responseText)
            sector_callback(data);
        };
        xhr.send();
    }

编辑：

您还可以使用此 AJAX 功能，它是跨浏览器兼容的：

function ajaxLoad(url,callback,plain) {
    var http_request = false;

    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType && plain) {
            http_request.overrideMimeType('text/plain');
        }
    } else if (window.ActiveXObject) { // IE
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    if (!http_request) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
    http_request.onreadystatechange =  function() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                eval(callback(http_request));
            }
            else {
                alert('Request Failed: ' + http_request.status);
            }
        }
    };
    http_request.open('GET', url, true);
    http_request.send(null);
}

并这样称呼它：

ajaxLoad('json_template1.json',processAjaxResult, true);

进而

function processAjaxResult(request) {
    alert(request.responseText); //<---- your data is now here!
    //...etc
}
于 2012-11-03T05:59:38.820 回答