1

我正在尝试获取具有形状选项信息的字符串并在我的 Google 地图应用程序上创建形状。

该字符串是通过拆分从本地文本文档构建的数组来创建的。

字符串显示为： Circle{center: new google.maps.LatLng(38.041872419557094, -87.6046371459961),radius:5197.017394363823,fillColor: '#000000',strokeWeight: 1,strokeColor: '#000000',map:map};

我必须采用这样的字符串并使形状显示为的函数：

function loadDrawings(evt)
{
    var f = evt.target.files[0];

    if (!f) 
    {
        alert("Failed to load file");
    } 
    else if (!f.type.match('text.*')) 
    {
        alert(f.name + " is not a valid text file.");
    } 
    else 
    {
        var r = new FileReader();
        r.onload = function (e) 
        {
            var contents = e.target.result;
            var drawings = [];
            var drawing;
            var drawingType;
            var shape;
            var shapeOptions;

            drawings = contents.split(";");
            for (i = 0; i < drawings.length - 1; i++) {
                drawing = drawings[i].toString();
                drawingType = drawing.substr(0, drawing.indexOf('{'));
                if (drawingType == "Circle")
                {
                    shapeOptions = drawing.substr(6);                //UNIQUE TO CIRCLE
                    shape = new google.maps.Circle(shapeOptions);
                    shape.setMap(map);
                }                    
            };
        }
        r.readAsText(f);
    } 
}

我的问题是 shapeOptions 作为字符串在上述用于创建 Circle 的语法中不起作用。但是，如果我获取字符串的内容，即：

{center: new google.maps.LatLng(38.041872419557094, -87.6046371459961),radius:5197.017394363823,fillColor: '#000000',strokeWeight: 1,strokeColor: '#000000',map:map}

并且直接输入它，形状就出现了。

我的 shapeOptions 是否需要某种变量类型才能正常工作？我知道新的 google.maps。需要（），但我没有运气从我的字符串创建一个变量。我在这里错过了什么吗？

非常感谢任何帮助！

4

1 回答 1

0

您的shapeOptions字符串是 JavaScript 对象文字，因此您可以eval()获取该对象：

shapeOptions = eval( '(' + drawing.substr(6) + ')' );

由于它包含map:map在其中，因此您不需要后续setMap()调用。

此外，您缺少一个var变量i。我真的不推荐所有var语句都放在函数顶部的编码风格。我发现它容易出错；var忽略 a而不注意它太容易了。（我知道一些著名的 JavaScript 专家坚持认为var，在顶部是唯一的方法，但他们没有看到其中的权衡。）

你不需要.toString()on drawings[i]。它已经是一个字符串。

您有两种不同的大括号样式。最好选择一个并坚持下去。对于 JavaScript，{不建议将 单独放在一行中，因为此代码不会按照您的预期执行：

return  // hoping to return an object literal - but it doesn't!
{
    a: 'b',
    c: 'd'
}

而这段代码确实可以正常工作：

return {
    a: 'b',
    c: 'd'
}

由于您正在使用FileReader，我认为可以安全地假设您也有.forEach()可用的。

您可以用.indexOf()正则表达式替换使用的代码和硬编码长度。

将所有这些放在一起，您最终可能会得到如下代码：

var r = new FileReader();
r.onload = function( e ) {
    e.target.result.split(";").forEach( function( drawing ) {
        var match = drawing.match( /^(\w+)({.*})$/ );
        if( ! match ) return;  // unrecognized
        var type = match[0], options = eval( match[1] );
        switch( type ) {
            case "Circle":
                new google.maps.Circle( options );
                break;
        }
    });
}
r.readAsText( f );

但你也许可以更进一步。到目前为止，我们正在研究一个Circle（为便于阅读而添加了换行符）：

Circle{
    center: new google.maps.LatLng(
        38.041872419557094,
        -87.6046371459961
    ),
    radius:5197.017394363823,
    fillColor: '#000000',
    strokeWeight: 1,
    strokeColor: '#000000',
    map:map
}

只需一个简单的更改，就可以直接作为 JavaScript 执行。您只需要“新的 google.maps”。在对象文字的开头和()周围：

new google.maps.Circle({
    center: new google.maps.LatLng(
        38.041872419557094,
        -87.6046371459961
    ),
    radius:5197.017394363823,
    fillColor: '#000000',
    strokeWeight: 1,
    strokeColor: '#000000',
    map:map
})

我想你也会有其他绘图类型？它们会像这样直接映射到google.maps.*对象Circle吗？如果是这样，您可以简单地执行以下操作：

var r = new FileReader();
r.onload = function( e ) {
    e.target.result.split(";").forEach( function( drawing ) {
        eval( drawing.replace(
            /^(\w+)({.*})$/,
            'new google.maps.$1(\$2)'
        ) );
    });
}
r.readAsText( f );
于 2013-05-08T18:41:46.783 回答