1

这个问题在这里扩展了一个使用domready. 该扩展试图包含第二个名称稍有不同的信息窗口：inwindowvs infowindow。第一个问题是，给定回答者的第一个“规则”——“只创建一个 infowindow 对象实例并使用 setContent() 方法修改其内容。” -- 可以有第二个信息窗口对象吗？

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

这里有一个工作的 JSFiddle.com 版本（至少它显示了一张地图）。

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

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

1 回答 1

2

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

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

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

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

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

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

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

编辑：

JSFiddle demo

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

希望这可以帮助。

于 2014-06-30T10:11:03.433 回答