从地图中删除多边形后构建多边形

时间:2012-11-02 17:54:01

标签: google-maps-api-3 event-handling geojson

我可以在地图上加载图块后5秒钟后清除多边形,但是当我尝试再次构建多边形时,原始数据会生成多边形。我想使用新的数据集。

我做错了什么?

很抱歉这么多问题。我在学习API方面有很多乐趣。

提前谢谢。

    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() }, 3000);
            setTimeout(function() { updateMap() }, 4000);
            });     
    }

    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() {
            data = JSON.parse(xhr.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 = [];

1 个答案:

答案 0 :(得分:1)

将tilesloaded事件移动到initialize函数中。就像它一样,你将添加尽可能多的听众,就像你有多边形一样,他们都会试图清除/更新地图。