dsasd12314 2015-09-23 10:42
浏览 41
已采纳

Google Maps如何将标记图标更改为SQL数据库中目录中引用的图标?

Hi all I was wondering if anyone could help me with my code I want to change the Marker Icon to an Icon that is referenced in a directory from an SQL Database. Here is a link to a screen capture of the database. http://i.stack.imgur.com/SriRX.png

This Database works great with the PHP on my website all except for the icons. As shown in the screen capture at this link. http://i.stack.imgur.com/ccGP1.png

It seems as if the last icon referenced in the database is the icon that is used for all markers but I do not want this to happen instead I want individual markers all looking different. The information contained in the markers is also correct. At the bottom of the inside of the content box it shows the icon directory which is correct on all but I have no idea why I can't get the actual icon to change to the directory shown in the content box. Below is an example of the PHP code used:

<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>
  • 写回答

1条回答 默认 最新

  • douhe2305 2015-09-23 10:52
    关注

    You are setting icon value to the last retrieved from the database in this piece of code

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

    You should, instead, get it from the addressDetails string as you have done for latitude, longitude and content.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题