谷歌地图如何将标记图标更改为从SQL数据库中引用的目录中的图标


Google Maps how to change the Marker Icon to an Icon that is referenced in a directory from an SQL Database?

嗨,我想知道是否有人可以帮助我与我的代码,我想把标记图标更改为从SQL数据库的目录中引用的图标。下面是数据库屏幕截图的链接。https://i.stack.imgur.com/SriRX.png

这个数据库在我的网站上的PHP工作得很好,除了图标。如此链接的屏幕截图所示。https://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>

您正在将icon值设置为这段代码中最后从数据库检索到的值

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

您应该从addressDetails字符串中获取它,就像您对纬度、经度和内容所做的那样。