用户单击搜索按钮后，地图不显示错误在哪里？

Question

I have a PHP code with MYSQL database, HTML and javascript with CSS where this code make the user select from the dropdown list and based on the user input the system will display a table that contains info related to requested data and it will pop up Google map that has a marker to show the location. 我有一个包含MYSQL数据库的PHP代码，具有CSS的 HTML和javascript代码，这些代码使用户从下拉列表中进行选择，并且根据用户输入，系统将显示一个包含与所请求数据相关的信息的表，并将弹出Google带有标记以显示位置的地图。

the problem is that after the user clicks the search button the system display the table without the Google map. 问题在于，用户单击搜索按钮后，系统将显示没有Google地图的表格。

I do not know if the problem is in the CSS or in the javascript code 我不知道问题出在CSS还是javascript代码中

CSS code: CSS代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=xxxxx&callback=initMap">
    </script>

     <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 400px;
        width:1045px;
        float: right;


      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;

      }
       #form {
              background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
              background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
              background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
              margin: auto;
              width: 550px;
              height: 450px;
              position: absolute;


              font-family: Tahoma, Geneva, sans-serif;
              font-size: 14px;
              font-style: italic;
              line-height: 24px;
              font-weight: bold;
              color: #09C;
              text-decoration: none;
              border-radius: 10px;
              padding: 10px;
              border: 1px solid #999;
              border: inset 1px solid #333;
             -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
             -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
             box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
           }

    </style>

JavaScript CODE: JavaScript代码：

<body>
    <div id="map"></div>
 <script type="text/javascript">

         var map,currentPopup;
         function initMap() 
         {
         map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: new google.maps.LatLng(33.888630, 35.495480),
          mapTypeId: 'roadmap'
         });
       }
        function addMarker(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,

            //icon: icons[feature.type].icon,
            map: map
          });



          var popup = new google.maps.InfoWindow({
                   content: '<b>Location :</b> ' + feature.info +'<br></br>' 
                   + '<b>Coordinates :</b> '+ feature.position +'<br></br>'
                   + '<b> Frequency :</b>' + feature.Frequency +'<br></br>',  
                   maxWidth: 300
                });

          google.maps.event.addListener(marker, "click", function() {
                    if (currentPopup != null) 
                    {
                        currentPopup.close();
                        currentPopup = null;
                    }
                    popup.open(map, marker);
                    currentPopup = popup;
                });
                google.maps.event.addListener(popup, "closeclick", function() {
                    map.panTo(center);
                    currentPopup = null;
                });
        }

        var features = [
        <?php
            $prependStr ="";
            foreach( $wpdb->get_results("select l.locationName, l.lattitude, l.longitude, f.TX, f.RX
                                       FROM army_site_location l LEFT 
                                       JOIN army_frequencies f
                                         on l.siteID = f.siteID 
                                       where l.locationName = '".$site_name."'", OBJECT) as $key => $row) {
               $lattitude = $row->lattitude;
               $longitude = $row->longitude;
               $TX = $row->TX;
               $RX = $row->RX;
               $siteName = $row->locationName;
           echo $prependStr;


       ?>
{
    position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
    info:'<?php echo $siteName;?>',
    Frequency: '<?php echo $TX;?>','<?php echo $RX;?>'


}
<?php
$prependStr =",";
}
?>
        ];



        for (var i = 0, feature; feature = features[i]; i++) {



          addMarker(feature);
       }

}

        </script>

HTML code HTML代码

<div id="form">
    <form method ="post" action ="" name="submit_form">
        <table border="0" width="30%">
            <tr>
               <td>Site Location</td>
               <td>employee Name</td>
               <td>Inspection Date</td>
             </tr>
             <tr>
               <td><select id="site_locationID"  name = "site_locationName">
                      <option value="">Select Site</option>
                 <?php



                     $query_site_location =$wpdb->get_results("Select DISTINCT
                      l.locationName,
                      e.employeeID,
                      e.employeeName,
                      i.inspectionID,
                      i.inspectionDate
                      FROM
                      army_site_location l 
                      JOIN inspection_site s
                      ON
                      s.siteID = l.siteID
                     JOIN inspection_info i 
                     ON
                     i.inspectionID = s.inspectionID
                     JOIN employee e 
                     ON
                     e.employeeID = i.employeeID");

                     //echo $query_site_location;

                      foreach($query_site_location as $row)
                      {





echo "<option id = '".$row ->employeeName."' name = '".$row ->inspectionDate."' id2 = '".$row ->employeeID."' name2 = '".$row ->inspectionID."' '".$row ->locationName."'>".$row->locationName."</option>";



                      } 




                 ?>

                </select></td>
                <!--create  dropdown list owner names-->
                <td><select id="employee_nameID"  name ="soldier_nameName">
                <option value="">Select Soldier</option>
                </select></td>

               <!--create  dropdown list Company names-->
                <td><select id="inspection_dateID"  name ="inspection_dateNAME">
                <option value="">Select Date</option>
                </select></td>

       </tr>
      <tr>
        <td><input type ="submit" name="query_submit" value ="Search" /></td>
      </tr>
        </table>
    </form>
  </div><!-- div of the  form-->

Answer 1

Try this let me know..... 试试这个让我知道.....

You call addMarker function when initialize the map.... 您可以在初始化地图时调用addMarker函数。

<script type="text/javascript">

    var map,currentPopup;
    var features = [
    <?php
        $prependStr ="";
        foreach( $wpdb->get_results("select l.locationName, l.lattitude, l.longitude, f.TX, f.RX FROM army_site_location l LEFT JOIN army_frequencies f  on l.siteID = f.siteID where l.locationName = '".$site_name."'", OBJECT) as $key => $row) {
            $lattitude = $row->lattitude;
            $longitude = $row->longitude;
            $TX = $row->TX;
            $RX = $row->RX;
            $siteName = $row->locationName;
            echo $prependStr;
    ?>
        {
            position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
            info:'<?php echo $siteName;?>',
            Frequency: '<?php echo $TX;?>','<?php echo $RX;?>'
        }
    <?php
            $prependStr =",";
        }
    ?>


    function initMap()
    {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: new google.maps.LatLng(33.888630, 35.495480),
            mapTypeId: 'roadmap'
        });

        for (var i = 0;i<features.length; i++) {
            addMarker(features[i]);
        }
    }
    function addMarker(feature) {
        var marker = new google.maps.Marker({
            position: feature.position,

            //icon: icons[feature.type].icon,
            map: map
        });
        var popup = new google.maps.InfoWindow({
            content: '<b>Location :</b> ' + feature.info +'<br></br>'
            + '<b>Coordinates :</b> '+ feature.position +'<br></br>'
            + '<b> Frequency :</b>' + feature.Frequency +'<br></br>',
            maxWidth: 300
        });

        google.maps.event.addListener(marker, "click", function() {
            if (currentPopup != null)
            {
                currentPopup.close();
                currentPopup = null;
            }
            popup.open(map, marker);
            currentPopup = popup;
        });
        google.maps.event.addListener(popup, "closeclick", function() {
            map.panTo(center);
            currentPopup = null;
        });
    }


</script>

用户单击搜索按钮后，地图不显示错误在哪里？

问题描述

CSS code: CSS代码：

JavaScript CODE: JavaScript代码：

HTML code HTML代码

1 个解决方案

解决方案1
0 2017-11-10 03:58:29

用户单击搜索按钮后，地图不显示错误在哪里？

问题描述

CSS code: CSS代码：

JavaScript CODE: JavaScript代码：

HTML code HTML代码

1 个解决方案

解决方案1 0 2017-11-10 03:58:29

解决方案1
0 2017-11-10 03:58:29