如果页面在一段时间内保持空闲,则为输入文本获取“NULL / Empty”值?

时间:2014-02-26 06:31:59

标签: javascript google-maps google-maps-api-3 google-maps-markers geospatial

由于网页空闲而在输入文本框中多次获得“NULL / Empty”值(我有输入的值)(闲置可能是原因,Itz my Guess)。

我可以逐个为多个形状命名。但如果我把网页持有5分钟。然后我无法在第一时间给出多边形(在infowindow对象中)的名称和描述。第二次,我可以为InfoWindow Object命名。但它并没有自动关闭。我必须手动关闭它。请帮我用Google Maps API编写一个错误代码。

我做过的事情。在infoWindow对象的帮助下绘制多边形后,为每个多边形提供名称和描述。代码如下。帮助我在代码中找到错误,并帮助我确定我执行不良的区域。

google.maps.visualRefresh = true;

var polygons = [];
var polygonShape = [];
var polygonJson = {};
var map;
var drawingTool = new google.maps.drawing.DrawingManager();

    function initialize() {
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom : 4,
            center : new google.maps.LatLng(37.5499, -95.5524),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        });
        drawingTool.setOptions({
            drawingMode : google.maps.drawing.OverlayType.POLYGON,
            drawingControl : true,
            drawingControlOptions : {
                position : google.maps.ControlPosition.TOP_CENTER,
                drawingModes : [ google.maps.drawing.OverlayType.POLYGON ]
            }
        });
        drawingTool.setMap(map);

    google.maps.event.addListener(drawingTool, 'overlaycomplete', function(event) {
        if (event.type == google.maps.drawing.OverlayType.POLYGON) {
            createPolygon(event.overlay);
        }
    });
}

    function createPolygon(polygon) {
        polygons.push(polygon);
        this.vertices = polygon.getPath();
        var content = '<label><b>Region Name : </b></label><input type="text" size="20" id="region_name"/></br><label align="top"><b>Description : </b></label><textarea id="region_desc" cols="20" rows="3"></textarea><br/><input type="button" value="Save Region" onclick="get_point_info(vertices);"/><br/>'
            + '<b>-----INFO-----</b>';
        verticesLoop(this.vertices, content);
    }

    function get_point_info(vertices) {
        var vertice = vertices;
        var RegionName = document.getElementById('region_name').value;
        var RegionDesc = document.getElementById('region_desc').value;
        this.infoWindow.close();
        polygonJson = {
            data : vertice,
            regionName : RegionName,
            regionDescription : RegionDesc
        };
        alert(Object.toJSON(polygonJson));
    }

    function verticesLoop(vertices, content) {
        var clat = 0;
        var clng = 0;
        var contents = content;
        var vert = vertices;
        vert.forEach(function(xy, i) {
            var contentString = '<br/><b>Lat :</b> ' + xy.lat() + '<b>Long : </b>'
                + xy.lng();
            contents = contents + contentString;
            clat = xy.lat();
            clng = xy.lng();
        });
        displayInfo(contents, new google.maps.LatLng(clat, clng));
    }

    function displayInfo(conString, customPosition) {
        this.infoWindow = new google.maps.InfoWindow({
            content : conString,
            position : customPosition,
            maxWidth : 350 
        });
        this.infoWindow.open(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

错误: 对于由infoWindow触发的文本框,文本框中的值变为空(有时)。

此致 ArunRaj。

1 个答案:

答案 0 :(得分:1)

问题的根本原因似乎是允许用户在写入区域名称和描述并按下保存区域之前绘制多个多边形。如果绘制多个多边形并在单击最后一个保存区域时打开信息窗口,则会从第一个多边形发送信息。因此,如果没有为第一个多边形写入任何内容,则会得到空值,如:

Object {data: ug, regionName: "", regionDescription: ""}

在使用drawingTool.setDrawingMode(null);使用保存区域发送信息之前,我会阻止绘制多边形:

function displayInfo(conString, customPosition) {
    console.log('this');
    console.log(this);

    this.infoWindow = new google.maps.InfoWindow({
        content : conString,
        position : customPosition,
        maxWidth : 350 
    });

    drawingTool.setDrawingMode(null);

    this.infoWindow.open(map);
}

并在收集有关名称和说明的信息后再次启用它:

function get_point_info(vertices) {
    var vertice = vertices;
    var RegionName = document.getElementById('region_name').value;
    var RegionDesc = document.getElementById('region_desc').value;
    this.infoWindow.close();
    polygonJson = {
        data : vertice,
        regionName : RegionName,
        regionDescription : RegionDesc
    };
    console.log('Object.toJSON(polygonJson)');
    console.log(polygonJson);

    drawingTool.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
}