代碼：

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

使用回波json_encode（$行）; 的foraeach環

這裏面是結果：

來源

2017-02-28 Nabil Jaroush

你似乎創造從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] 
      });

來源

2017-02-28 23:44:23 Nick

我使用json_encode（$行），這樣你的要求更換**內容：與json_encode addressDetails [0] **？ –

我建議使用json_encode（$ row），這樣你就可以可視化數據並找出它需要如何呈現給googlemaps JS。我建議你仔細閱讀googlemaps API文檔，因爲你缺少相當的分配，例如：「position：lat」不正確，它需要lat和long – Nick

我在位置添加了long long變量，但仍然存在相同的問題。，我做了json_encode（$ row）我將編輯問題併爲結果添加圖片 –

顯示谷歌地圖與標記檢索從mysql

代碼：

回答

相關問題