Javascript Google映射如何将标记图标更改为SQL数据库目录中引用的图标？
大家好，我想知道是否有人能帮我写代码我想把标记图标改成一个在SQL数据库的目录中引用的图标。这里是数据库屏幕截图的链接。 这个数据库与我网站上的PHP非常配合，除了图标。如此链接的屏幕截图所示 似乎数据库中引用的最后一个图标是用于所有标记的图标，但我不希望发生这种情况，而是希望每个标记看起来都不同。标记中包含的信息也是正确的。在内容框内部的底部，它显示了图标目录，这在所有内容框中都是正确的，但我不知道为什么我不能将实际图标更改为内容框中显示的目录。下面是使用的PHP代码示例：Javascript Google映射如何将标记图标更改为SQL数据库目录中引用的图标？,javascript,php,mysql,database,google-maps,Javascript,Php,Mysql,Database,Google Maps,大家好，我想知道是否有人能帮我写代码我想把标记图标改成一个在SQL数据库的目录中引用的图标。这里是数据库屏幕截图的链接。 这个数据库与我网站上的PHP非常配合，除了图标。如此链接的屏幕截图所示 似乎数据库中引用的最后一个图标是用于所有标记的图标，但我不希望发生这种情况，而是希望每个标记看起来都不同。标记中包含的信息也是正确的。在内容框内部的底部，它显示了图标目录，这在所有内容框中都是正确的，但我不知道为什么我不能将实际图标更改为内容框中显示的目录。下面是使用的PHP代码示例： <html
<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>
正文{字体系列：Verdana，Arial，Helvetica，无衬线；颜色：#000000；字体大小：13px；}
#地图画布{宽度：100%；高度：100%；z索引：0；}
//此javascript将在页面加载时加载。
jQuery（文档）.ready（函数（$）{
//初始化谷歌地图
var地理编码器；
var映射；
var-markersArray=[]；
var-infos=[]；
geocoder=新的google.maps.geocoder（）；
变量myOptions={
缩放：9，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
//将地图加载到Map_canvas div中
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
//初始化一个变量，该变量将自动调整地图的大小，使其与正在打印的内容一致
var bounds=new google.maps.LatLngBounds（）；
//初始化编码字符串
var编码环；
//初始化将保存拆分字符串内容的数组
var stringArray=[]；
//从隐藏输入中获取编码字符串的值
encodedString=document.getElementById（“encodedString”）.value；
//将编码字符串拆分为一个数组，并分隔每个位置
stringArray=encodedString.split（“****”）；
var x；
对于（x=0；x0）{
infos[0]。设置（“标记”，空）；
infos[0]。关闭（）；
infos.length=0；
}
}
});
您正在将图标
值设置为此代码段中最后一次从数据库检索到的值
<script>
icon = '<?php echo $icon ?>';
</script>
图标=“”；
相反，您应该从addressDetails
字符串中获取它，就像您对纬度、经度和内容所做的那样