谷歌地图 v3 形状

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 作为字符串在上述创建圆的语法中不起作用。但是，如果我取字符串的内容，即：

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

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

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

非常感谢任何帮助！

Answer 1

你的shapeOptions字符串是一个JavaScript对象字面量，所以你可以eval()它来获取对象：

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

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

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

您不需要drawings[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（为便于阅读添加了换行符）：

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
})

我假设您还会有其他绘图类型？它们都会像Circle 那样直接映射到google.maps.* 对象吗？如果是这样，您可以这样做：

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 );