代码：

Question

我正在使用PHP和MYSQL来从数据库中检索数据。我需要根据从MYSQL数据库中检索到的数据嵌入Google Map并绘制标记。

我能够从数据库中检索数据并将其作为XML格式显示在网页上。 但未显示Google地图

代码中的错误在哪里？

我将不胜感激任何帮助。

代码：

<!DOCTYPE html>
    <?php
        /*
        Template Name: MAP
        */

        get_header();
          ?>
<html>

   <head>
     <script type='text/javascript' src='jquery-1.6.2.min.js'></script>
    <script type='text/javascript' src='jquery-ui-1.8.14.custom.min.js'></script>
    <style>

        BODY {font-family : Verdana,Arial,Helvetica,sans-serif; color: #000000; font-size : 13px ; }

        #map_canvas { width:100%; height: 100%; z-index: 0; }
    </style>
    <script type="text/javascript" 
   src="https://maps.googleapis.com/maps/api/js?key=*******************&callback=initMap">
    </script>
    <script type='text/javascript'>
    //This javascript will load when the page loads.
    jQuery(document).ready( function($){

            //Initialize the Google Maps
            var geocoder;
            var map;
            var markersArray = [];
            var infos = [];

            geocoder = new google.maps.Geocoder();
            var myOptions = {
                  zoom: 8,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
            //Load the Map into the map_canvas div
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            //Initialize a variable that the auto-size the map to whatever you are plotting
            var bounds = new google.maps.LatLngBounds();
            //Initialize the encoded string       
            var encodedString;
            //Initialize the array that will hold the contents of the split string
            var stringArray = [];
            //Get the value of the encoded string from the hidden input
            encodedString = document.getElementById("encodedString").value;
            //Split the encoded string into an array the separates each location
            stringArray = encodedString.split("****");

            var x;
            for (x = 0; x < stringArray.length; x = x + 1)
            {
                var addressDetails = [];
                var marker;
                //Separate each field
                addressDetails = stringArray[x].split("&&&");
                //Load the lat, long data
                var lat = new google.maps.LatLng(addressDetails[2], addressDetails[3]);
                //Create a new marker and info window
                marker = new google.maps.Marker({
                    map: map,
                    position: lat,
                    //Content is what will show up in the info window
                    content: addressDetails[0]
                });
                //Pushing the markers into an array so that it's easier to manage them
                markersArray.push(marker);
                google.maps.event.addListener( marker, 'click', function () {
                    closeInfos();
                    var info = new google.maps.InfoWindow({content: this.content});
                    //On click the map will load the info window
                    info.open(map,this);
                    infos[0]=info;
                });
               //Extends the boundaries of the map to include this new location
               bounds.extend(lat);
            }
            //Takes all the lat, longs in the bounds variable and autosizes the map
            map.fitBounds(bounds);

            //Manages the info windows
            function closeInfos(){
           if(infos.length > 0){
              infos[0].set("marker",null);
              infos[0].close();
              infos.length = 0;
           }
            }

    });
    </script>

   </head>

   <body>
      <div id='input'>


<?php
global $wpdb;
//Initialize your first couple variables
$encodedString = ""; //This is the string that will hold all your location data
$x = 0; //This is a trigger to keep the string tidy

//Now we do a simple query to the database
$sql = $wpdb->get_results("select * from site_coordinates", ARRAY_N);


//Multiple rows are returned

foreach ($sql as $row) 
{
    //This is to keep an empty first or last line from forming, when the string is split
  //  if ( $x == 0 )
   // {
       //  $separator = "";
    //}
    //else
    //{
         //Each row in the database is separated in the string by four *'s
         $separator = "****";
    //}
    //Saving to the String, each variable is separated by three &'s
    $encodedString = $encodedString.$separator.
    "<p class='content'><b>Site ID :</b> ".$row[0].
    "<br><b>Lat:</b> ".$row[1].
    "<br><b>Long: </b>".$row[2].
    "<br><b>Height: </b>".$row[3].
    "<br><b>TX-Power: </b>".$row[4].
    "<br><b>TX-Center: </b>".$row[5].
    "<br><b>RX-Center: </b>".$row[6].
    "<br><b>Coverage Area: </b>".$row[7].  
    "</p>";
    $x = $x + 1;
}

?>
      <input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>" />  
   </div>
   <div id="map_canvas"></div>
 </body>   
<?php
get_footer();
?>
</html>

使用echo json_encode（$ row）; 在foraeach循环中

这是结果：

Answer 1

您似乎在PHP中从数据库创建HTML字符串。尝试创建googlemap JS期望看到的数据，您可以将其作为JSON对象执行，这在PHP中很容易实现。停止尝试以HTML格式显示数据库数据，而不是用JSON思考。

在你的foreach中，试试这个：

echo json_encode($row);

这应该开始给你一个想法。

然后看这里：

 //Create a new marker and info window
            marker = new google.maps.Marker({
                map: map,
                position: lat,
                //Content is what will show up in the info window
                content: addressDetails[0]
            });

显示谷歌地图与从mysql检索的标记

代码：

1 个答案: