Question

我希望HTML表单内容仅显示在用户点击标记时出现的infowindow内，但此时它显示在地图下方。当我点击标记时，它会从地图下方移动到infowindow。我试图用这样的东西隐藏它：

JS

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

CSS

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

我似乎无法让它发挥作用。如果我只是将HTML表单放在infowindow内容中而不是引用可以起作用的“表单”，那么我的印象就是这样，但是不觉得在js中放置HTML表单会不会是正确的做事方式？ / p>

我的完整代码（与此问题相关）如下：

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>

视觉示例：

Answer 1

我通过添加到css来解决这个问题：

    static void Main(string[] args)
    {
        SQLiteConnectionStringBuilder conBuilder = new SQLiteConnectionStringBuilder();
        conBuilder.DataSource = args[0];
        conBuilder.Pooling = false;                                    
        conBuilder.ReadOnly = true;

        string connectionString = conBuilder.ConnectionString;

        while (true)
        {
            RunQueryInNewConnection(connectionString);
            System.Threading.Thread.Sleep(500);
        }
    }

    static void RunQuery(SQLiteConnection con)
    {
        using (SQLiteCommand cmd = con.CreateCommand())
        {
            cmd.CommandText = "select * from TabKatalog where ReferenzName like '%0%'";
            Console.WriteLine("Execute Query: " + cmd.CommandText);

            Stopwatch watch = new Stopwatch();
            watch.Start();

            int lines = 0;
            SQLiteDataReader reader = cmd.ExecuteReader();
            while (reader.Read())
                lines++;

            watch.Stop();
            Console.WriteLine("Query result: " + lines + " in " + watch.ElapsedMilliseconds + " ms");
        }
    }


    static void RunQueryInNewConnection(string pConnectionString)
    {
        using (SQLiteConnection con = new SQLiteConnection(pConnectionString, true))
        {
            con.Open();
            RunQuery(con);
        }

        System.Data.SQLite.SQLiteConnection.ClearAllPools();
        GC.Collect();
        GC.WaitForPendingFinalizers();           
    }

在JS文件中添加到#form{ display: none; }下面一行的google.maps.event.addListener(marker, 'click', function()：

infowindow.open(map, marker);

Google地图infowindow表单内容显示在地图

1 个答案: