文本输入到全局信息窗口

Question

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

如果是这样，那么我尝试创建inwindow 有什么问题，如下所示？单击地图时会出现inwindow，但单击其“提交”按钮似乎没有任何作用。

A working JSFiddle.com version 在这里（至少它显示了一张地图）。

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

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 事件在表单中的提交按钮被点击时触发。动作应该在表单上，​​而不是在按钮上。但是这里没有表格。您可以改用onclick 事件（例如删除按钮）。

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

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

4. 您为什么不使用我（和您）用于删除按钮操作的相同技术？ （使用Id等）我建议您尝试了解那里发生的情况并将其调整到您设置标记标题的部分。

如果您仍然卡住，请告诉我，我会进一步解释！

编辑：

JSFiddle demo

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

希望这会有所帮助。