Google Maps如何將標記圖標更改爲SQL數據庫中目錄中引用的圖標？

-1

大家好我想知道是否有人可以幫我用我的代碼我想將標記圖標更改爲從SQL數據庫目錄中引用的圖標。這是一個指向數據庫屏幕截圖的鏈接。 http://i.stack.imgur.com/SriRX.png Google Maps如何將標記圖標更改爲SQL數據庫中目錄中引用的圖標？

這個數據庫非常適合我網站上的PHP，除了圖標。如此鏈接的屏幕截圖所示。 http://i.stack.imgur.com/ccGP1.png

看起來好像數據庫中引用的最後一個圖標是用於所有標記的圖標，但我不希望發生這種情況，而是希望各個標記都看起來不同。標記中包含的信息也是正確的。在內容框內部的底部顯示了圖標目錄，但是我不知道爲什麼我無法將實際圖標更改爲內容框中顯示的目錄。下面是使用的PHP代碼的例子：

<html> 
<head> 
<script type='text/javascript' src='js/jquery-1.6.2.min.js'></script> 
<script type='text/javascript' src='js/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="http://maps.googleapis.com/maps/api/js?sensor=false" /></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: 9, 
       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[1], addressDetails[2]); 
      //Create a new marker and info window 
      marker = new google.maps.Marker({ 
       map: map, 
       position: lat, 
       icon: icon, 
       //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 
//Connect to the MySQL database that is holding your data, replace the x's with your data 
mysql_connect("localhost", "xxxx_xxxx", "xxxx") or 
die("Could not connect: " . mysql_error()); 
mysql_select_db("xxxx_map"); 

//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 
$result = mysql_query("SELECT * FROM `markers`"); 

//Multiple rows are returned 
while ($row = mysql_fetch_array($result, MYSQL_NUM)) 
{ 
//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 
$image = $row[4]; 
$icon = $row[5]; 
$description = $row[6]; 
$encodedString = $encodedString.$separator. 
"<p class='content' align='center'><b><img src='".$image."' width='147' height='150'><br/><br>".$description."<br>".$icon."</b> ". 
"</p>&&&".$row[1]."&&&".$row[2]; 

$x = $x + 1; 
} 
?> 
<script> 
icon = '<?php echo $icon ?>'; 
</script> 

    <input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>" /> 
    <hr> 
    <input type="text" id="icon" name="icon" value="<?php echo $icon; ?>" /> 
</div> 
<div id="map_canvas"></div> 
</body> 
</html>

來源

2015-09-23 T.Cunningham

您icon值設置爲最後的這段代碼

<script> 
icon = '<?php echo $icon ?>'; 
</script>

從數據庫中檢索你應該，而是從一開始就addressDetails字符串，因爲您已經完成了緯度，經度和內容。

來源

2015-09-23 10:52:57 GUL

太棒了！謝謝 –

Google Maps如何將標記圖標更改爲SQL數據庫中目錄中引用的圖標？

回答

相關問題