Google Maps API v3，在信息窗口中使用动态调整大小验证 html 表单

Question

我在使用 jQuery 验证插件的 Google 地图信息窗口中有一个 HTML 表单。当它显示错误消息（我已将它们移动到表单输入下）时，带有表单的 div 会溢出信息窗口。

我已经阅读了对类似问题的回复，但我还没有解决任何这些解决方案。

HTML 表单：

<div id="formDiv">
  <form action="addRow.php" method="post"id="htmlForm">
     <fieldset>
        <p id="contactP">
          <label for="contact">Email:</label>
          <input type="text" name="contact" id="contact"/> <br/>
        </p>
        <p id="dateP">
          <label for="datepicker">Date:</label>
          <input type="text" name="date" id="datepicker"/> <br/>
        </p>
        <p id="latP">
          <label for="lat">Latitude:</label>
          <input type="text" name="lat" id="lat" class="location"/> <br/>'+
        </p>
        <p id="lngP">
          <label for="lng">Longitude:</label>
          <input type="text" name="lng" id="lng" class="location"/> <br/>
        </p>
        <p id="descP">
          <label for="desc" id="dos">Description of Sighting:</label> <br/>
          <textarea name="desc" id="desc"></textarea><br/>
        </p>

          <input type="submit" class="button" id="submitBtn" value="Post Sighting!" onclick="postSighting();"/>'+
      <p class="clear"></p>'+
     </fieldset></form></div>

;

jQuery:

$('#htmlForm').validate({
    rules: {
        contact: {required:true, email:true},
        date: {required:true},
        lat: {required:true},
        lng: {required:true},
        desc: {required:true},
    },
    messages: {
        desc: 'Please be descriptive!'
    },
    errorPlacement: function(error, element) {
        error.appendTo($('#' + element.attr('id') + 'P'));
        if (element.attr('id') == 'desc') {
            error.css({
                text_align: 'center',
                color: 'red',
                padding: 45,
            });
        } else {
            error.css({
                color: 'red',
                padding: 10,
                margin:0,
            })};
    }
});

Answer 1

首先：您必须确保新内容始终适合 infoWindow（infoWindow 不能大于地图）

问题：当验证插件修改内容时，infoWindow 的 content_changed-event 不会触发（但这是调整 infoWindow 大小所必需的）

仅触发 infoWindow 的 content_changed-event 是不够的，这会将内容重置为 infoWindow 的当前 content-property（在您的插件修改内容时不会更改）

所以你必须在插件修改标记后通过将内容设置为 infoWindow 内的当前子树来设置内容。听起来很复杂，其实不然：

infowindowObject.setContent(document.getElementById('formDiv'));

这不会对 DOM 产生任何影响，但会：

1. 将 infoWindow 的 content-property 设置为当前内容
2. 触发 content_changed 事件，因此应该调整 infoWindow 的大小。