Javascript字符串意外地变成了对象

Question

我一直在做一个涉及谷歌地图API的简单项目。我的朋友想要一个访问者地图为他的网站，游客可以放置一个标志代表他们的位置。这些标记也与诸如名称、消息等数据相关联。当点击该标记时，这些数据应该显示在信息窗口中。

到目前为止，一切都工作得很好，但是我遇到了一个困扰我的bug。

当用户写下一个新的点时，将调用一个函数来生成一个特定于该对象的表单。

function setupForm(id){
    var content='<div class="gdform">'+
            '<form id='+id+'>'+
            '<ul>'+
            '<li><input type="text" id="userName" value="name" onfocus="value=''"/></li>'+
            '<li><textarea rows ="15" cols="50" wrap="hard"></textarea></li>'+
            '</ul>'+
            '<input type="button" value="submit" onclick="markers.'+id+'.setData()"/>'+
            '<input type="button" value="cancel" onclick="setTimeout(function(){removeMark('+id+')}, 100)"/>'+
            '</form>'+
            '</div>';
return content;
}

其中id是地图上每个标记的唯一id。标记存储在哈希表中，可以使用此id引用。

这里的问题来自取消按钮。当按下时，它应该关闭InfoWindow，从映射中删除标记，并从哈希表中删除标记。为此，它调用函数removeMark，如下所示:

function removeMark(id){
   infoWindow.close()
   markers.id.mark.setMap(null);
   delete markers.id;
}

在这里，我收到一个类型错误，告诉我它不能读取未定义的属性标记。

在尝试调试代码时，我设置了一些断点，一个在setupForm函数中，另一个在removeMark中。当通过代码步进，我注意到，而在setupForm, js控制台识别id作为一个字符串。然而，当在removeMark, js控制台告诉我，id突然成为一个对象。

我还没能弄清楚为什么会这样。以下是所有代码:

http://jsfiddle.net/39vKm/

谢谢你的帮助!

Answer 1

好了…你的代码有三个问题…

首先，您在取消按钮的onclick声明中缺少了id周围的单引号。其次，你需要从removeMark函数返回false，并在按钮的onclick事件中返回removeMark…(不需要超时)

代码:

function setupForm(id){
    var content='<div class="gdform">'+
                '<form id='+id+'>'+
                '<ul>'+
                '<li><input type="text" id="userName" value="Whats your name?" onfocus="value=''"/></li>'+
                '<li><textarea rows ="15" cols="50" wrap="hard"></textarea></li>'+
                   '</ul>'+
                '<input type="button" value="submit" onclick="markers.'+id+'.setData()"/>'+
                '<input type="button" value="cancel" onclick="return removeMark(''+id+'')"/>'+
                '</form>'+
                '</div>';
    return content;
}

第三，当删除标记时，您需要在数组上使用括号引用标记…

function removeMark(id){
    infoWindow.close()
    markers[id].mark.setMap(null);
    delete markers[id];
    return false;
}

更新小提琴:http://jsfiddle.net/gislikonrad/39vKm/5/