Question

我正在尝试获取具有形状选项信息的字符串，并在我的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。 requires（），但我没有运气从我的字符串创建变量。我在这里错过了什么吗？

非常感谢任何帮助！

Answer 1

您的shapeOptions字符串是一个JavaScript对象字面值，因此您可以eval()来获取该对象：

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

由于其中包含map:map，因此您无需进行后续的setMap()调用。

此外，您错过了var变量的i。我并不真正推荐所有var语句都位于函数顶部的编码风格。我发现它容易出错;在没有注意到的情况下省略var太容易了。（我知道一些着名的JavaScript专家坚持认为顶部的var是唯一的方式，但他们没有看到所涉及的权衡。）

您.toString()上不需要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 );

Google Maps v3 Shapes

1 个答案: