javascript - 全局信息窗口的文本输入

Question

This question extends an answer here that uses domready .该扩展试图包含名称略有不同的第二个信息窗口:inwindow 与 infowindow。第一个问题是，鉴于回答者的第一个“规则”——“只创建一个信息窗口对象的实例并使用 setContent() 方法修改其内容。” -- 可以第二个信息窗口对象吗？

如果是这样，那么我尝试创建 inwindow 的尝试有什么问题，如下所示？ inwindow 在点击 map 时出现，但点击它的“提交”按钮似乎没有做任何事情。

A working JSFiddle.com version在这里(至少它显示了一张 map )。

接下来是一些全局变量和对象。

var map
var infowindow = new google.maps.InfoWindow();
var inwindow = new google.maps.InfoWindow();
var markers = [];
var counter = 0;

initialize() 接下来摘录。

google.maps.event.addListener(map, 'click', function (event) {

    addMarker(event.latLng);
    });

google.maps.event.addListener(inwindow, 'domready', function () {
    var button = document.getElementById('inputButton');
    var input = document.getElementById('nameinput').value;
    button.onsubmit = function() {
    marker.title = input;
    inwindow.close();
    };
    });
google.maps.event.addListener(infowindow, 'domready', function () {
    var button = document.getElementById('deleteButton');
    var id = parseInt(button.getAttribute('data-id'));  
    button.onclick = function() {
    deleteMarker(id);
    };
    });
}

function addMarker(location) {

    counter++;

    var inputForm = 'Name:  <input type="text" id="nameinput" size="31" maxlength="31" tabindex="1"/>' + '<input type="button" id="inputButton" value="Submit">';

    var marker = new google.maps.Marker({
position: location,
map: map,
id: counter
});
inwindow.setContent(inputForm);
inwindow.open(map, marker);

markers.push(marker);

var deleteButton = '<button id="deleteButton" data-id="' + counter + '">Delete</button>';

google.maps.event.addListener(marker, 'rightclick', function () {
    infowindow.setContent(deleteButton);
    infowindow.open(map, marker);
    });
}

function deleteMarker(markerId) {
    for (var i=0; i<markers.length; i++) {
    if (markers[i].id === markerId) {
        markers[i].setMap(null);
    }
    }
}

Answer 1

您可以拥有任意数量的信息窗口。我给你的规则 there更像是提示(因此是斜体)。您可以随时根据自己的需要进行调整。

现在您的代码中有一些问题:

1. onsubmit 事件在单击表单中的提交按钮时触发。 Action 应该在表单上，​​而不是在按钮上。但是你这里没有表格。您可以改用 onclick 事件(例如删除按钮)。

2. 您会在信息窗口准备就绪 (domready) 时获得输入值，而不是在用户填写该字段之后。因此它永远是空的。

3. 您设置了 marker.title = xxx 但是 marker 在这里不可用，此外，您应该使用 setTitle()更改标记标题的方法。

4. 为什么您不使用我(和您)用于删除按钮操作的相同技术？ (使用 Id 等)我建议您尝试了解那里发生了什么，并使其适应您设置标记标题的部分。

如果您仍然遇到困难，请告诉我，我会进一步解释!

编辑:

JSFiddle demo

请注意，输入和按钮上没有定义 tabindex，我使用 .focus() 在信息窗口打开时将焦点设置在输入或按钮上。

希望这对您有所帮助。