Google maps api 3 谷歌地图v3形状

我正在尝试获取一个包含形状选项信息的字符串，并在我的谷歌地图应用程序中创建形状

字符串是通过拆分从本地文本文档生成的数组生成的

该字符串显示为： 圆{中心：new google.maps.LatLng38.041872419557094，-87.6046371459961，半径：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，因为在创建圆的上述语法中，字符串不起作用。但是，如果我获取字符串的内容，即：

{中心：new google.maps.LatLng38.041872419557094，-87.6046371459961，半径：5197.017394363823，fillColor:'000000'，strokeWeight:1，strokeColor:'000000'，map:map}

然后直接输入它，形状就会出现

我的shapeOptions是否需要特定的变量类型才能运行？我知道新的谷歌地图。需要，但我没有幸从字符串创建变量。我是不是遗漏了什么

非常感谢您的帮助

您的shapeOptions字符串是一个JavaScript对象文本，因此您可以对其求值以获取对象：

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

因为它有map:map，所以不需要后续的setMap调用

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

您不需要在绘图[i]上使用.toString。它已经是一个字符串了

您有两种不同的支撑样式。最好选择一个并坚持下去。对于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{
    center: new google.maps.LatLng(
        38.041872419557094,
        -87.6046371459961
    ),
    radius:5197.017394363823,
    fillColor: '#000000',
    strokeWeight: 1,
    strokeColor: '#000000',
    map:map
}

只需一个简单的更改，就可以直接作为JavaScript执行。您只需要在对象文字的开头和周围添加“new 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 );

---

Michael，谢谢你的及时而有益的回复。shapeOptions=eval+drawing.substr6+；Michael，首先让我感谢你的回复。这非常有益，帮助我更好地理解如何用更少的东西实现更多的目标，我肯定需要做更多的事。这不是借口，但我希望当我取得进步时，我不再是一个开始内尔，我的脚本编写效率会更高。在你编辑之前，我不知道括号样式。我向你保证，我将开始使用你的建议。再次感谢你的帮助！哎呀，我忘记了那些括号。感谢你捕捉到了这一点，我将它们添加到了答案中，以供将来的读者阅读。否则，我很高兴我的com这些建议很有帮助，继续努力吧！