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

时间:2017-11-09 08:47:08

标签: javascript php html css mysql

我的 PHP 代码包含 MYSQL 数据库, HTML javascript CSS 此代码使用户从下拉列表中选择,并根据用户输入,系统将显示一个包含与所请求数据相关的信息的表格,它将弹出谷歌地图,其中包含一个标记以显示位置。

问题是,在用户点击搜索按钮后,系统会显示没有Google地图的表格。

我不知道问题是在 CSS 还是在 javascript 代码中

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代码:

<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代码

<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-->

1 个答案:

答案 0 :(得分:0)

试试这个让我知道.....

初始化地图时调用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>