javascript - Google map 信息窗口表单内容显示在 map 下方

Question

我希望 HTML 表单内容仅显示在用户单击标记时出现的信息窗口内，但目前它显示在 map 下方。当我单击标记时，它会从 map 下方移动到信息窗口中。我试图用这样的东西隐藏它:

JS

    function formShow(){ 
          $('#map').click(function() {
        $('#form').addClass('.formShow');
      });
  };

CSS

#form{
    display: none;
}
.formShow{
    display: block;
}

我似乎无法让它工作。我的印象是，如果我只是将 HTML 表单放在 infowindow 内容中而不是引用“表单”，那会起作用，但感觉将 HTML 表单放在 js 中并不是正确的做法？

我的完整代码(与这个问题相关)如下:

var map;
      var marker;
      var infowindow;
      var messagewindow;
      var lat;
      var lng;

      function initMap() {
        var uk = {lat: 55.759107, lng: -3.443596};
        map = new google.maps.Map(document.getElementById('map'), {
          center: uk,
          zoom: 13
        });

        infowindow = new google.maps.InfoWindow({
          content: document.getElementById('form')     
        })

        messagewindow = new google.maps.InfoWindow({
          content: document.getElementById('message')
        });

        google.maps.event.addListener(map, 'click', function(event) {
          marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
          });

          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
            lat = this.position.lat();
            lng = this.position.lng();
            //alert(this.position);
            document.forms["mapSubForm"]["lat"].value = lat;
            document.forms["mapSubForm"]["lng"].value = lng;
           
          });                
      
        });
    };
    
                 function formShow(){ 
      $('#map').click(function() {
    $('#form').addClass('.formShow');
      });
  }; 

#form{
    display: none;
}
.formShow{
    display: block;
}

<div id="map" height="100%" onclick = "formShow()"></div>
   <div id="form">
        <form action="add-map.php" method="POST" enctype="multipart/form-data" id="mapSubForm">
        <h2>Add New Submission</h2>
        <label for="name">Enter a name:</label>
        <input type="text" name="name" id="name">
        <label for="address">Enter address:</label>
        <input type="text" name="address" id="address">
        <input type="hidden" name="lat" id="lat">
        <input type="hidden" name="lng" id="lng">
        <input type="submit" name="submitMapBtn" value="Add Submission">
    </form>
    </div>

视觉示例:

• Before Click
• After Click

Answer 1

我通过添加到 css 解决了这个问题:

#form{
    display: none;
}

并在 JS 文件中添加到 infowindow.open(map,marker) 下面一行的 google.maps.event.addListener(marker, 'click', function() ;:

document.getElementById('form').style.display = "block";