谷歌动态标记的地图

时间:2011-04-12 04:01:13

标签: php javascript google-maps

我想做的是:
当我选择组合框项目时,从数据库中获取项目并显示我选择的所有标记。但它不起作用。 这是我的代码:

的index.php

<?php 
    session_start();
    $_SESSION['sum']=0;
        include("database/connect_conf.php");
        if(!connection()){
            echo 'Not connect: '.mysql_error();
            }else{
                connection();
                }
        if(!db_select()){
            echo 'Not connect to Dabatase: '.mysql_error();

            }else{
                db_select();
                }

            $string="SELECT count(province_id) AS c FROM tbl_cep_forum";
            $get_result=mysql_query($string);
                if($get_result){
                    $j=1;
                    while($value=mysql_fetch_array($get_result)){
                        $_SESSION['sum']=$_SESSION['sum']+$value['c'];
                        $j++;
                        }
                    }

    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps AJAX + mySQL/PHP Example</title>
        <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE-QQqQ" 
           type="text/javascript"></script>
            <link rel="stylesheet" type="text/css" href="includes/style_map.css" />
            <script type="text/javascript" src="includes/jquery-1.5.min.js"></script>
            <script type="text/javascript" src="includes/interactive_map.js"></script>
            <script type="text/javascript" src="includes/js_map.js"></script>
            <script type="text/ecmascript" src="includes/ajax_google.js"></script>
        <script type="text/javascript">
        //<![CDATA[


        var iconRed = new GIcon(); 
        iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
        iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
        iconRed.iconSize = new GSize(12, 20);
        iconRed.shadowSize = new GSize(22, 20);
        iconRed.iconAnchor = new GPoint(6, 20);
        iconRed.infoWindowAnchor = new GPoint(5, 1);

           var customIcons= iconRed;

        function load() {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(12.5, 104.98386), 7);

            // Change this depending on the name of your PHP file
            GDownloadUrl("phpsqlajax_genxml.php", function(data) {
              var xml = GXml.parse(data);
              var markers = xml.documentElement.getElementsByTagName("marker");
              for (var i = 0; i < markers.length; i++) {
    //          var pro_id=markers[i].getAttribute("id");

                var name = markers[i].getAttribute("name");
                var type = markers[i].getAttribute("type");
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
                var address = markers[i].getAttribute("address");
                var description = markers[i].getAttribute("description");
                var marker = createMarker(point, name, address, type,name,description);
    //          marker.url='http://www.jaukjey.com';
                map.addOverlay(marker);
              }
            });
          }
    }

        function createMarker(point, name, address, type,id,description) {
          var marker = new GMarker(point, customIcons);
          var html_a = "<b>" + name + "</b> <br/>"+ type;
    //      var html = "<b>" + name + "</b> <br/>" + type;

          GEvent.addListener(marker, 'click', function() {
    //          window.location.href = marker.url;
                var imag_info='<img class="city_photo" src="images/cities/sydney.jpg" alt="sydney" width="75" height="75" />';
                var sideHtml='<div class="city_info"><div id="'+name+'" class="dot" continent="'+name+'">'+imag_info+'<br><b>Addres:</b></br><h2>Province Name:....</h2><br></br>'+description+'</div></div>';
            $('.detail_container').fadeOut(500,function(){

                $('.detail_container .city_detail').html(sideHtml);
                $(".detail_container").fadeIn(500);
                                                            })
    //          $(".city_detail").html(sideHtml);
                var div=document.getElementById(id);
                marker.openInfoWindowHtml(html_a);
          });
          return marker;

        }
    /*function Get marker by province*/
    function phpajax_get_Province(){
        $('#t2').load('phpajax_get_uniq_province.php').show();
                        var get_name=$('#continent').val();
                        $.post('phpajax_get_uniq_province.php', { continent: get_name },
                               function(return_data){

                                   $('#t2').html(return_data).show();
                                   });
                        alert('Province name is: '+ get_name);
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(12.5, 104.98386), 7);

            // Change this depending on the name of your PHP file
            GDownloadUrl("phpajax_get_uniq_province.php", function(data) {
              var xml = GXml.parse(data);
              var markers = xml.documentElement.getElementsByTagName("marker");
              for (var i = 0; i < markers.length; i++) {
    //          var pro_id=markers[i].getAttribute("id");

                var name = markers[i].getAttribute("name");
                var type = markers[i].getAttribute("type");
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
                var address = markers[i].getAttribute("address");
                var description = markers[i].getAttribute("description");
                var marker = createMarker(point, name, address, type,name,description);
                map.addOverlay(marker);
          //alert('Has reloded!'+ name+"<br></br>"+ type);
              }
            });

          }     
                }

    </script>

      </head>
      <body onload="load()" onunload="GUnload()" bgcolor="#99b3cc">
        <div id="menu_title"><a href="">Forum</a><a href="">Training</a></div>
        <div class="map_contianer">
        <div id="map" style="width: 600px; height: 500px;"></div>
                    <!-- Form -->
          <form id="mapForm" name="mapForm" class="form_continent" method="post" action="">

              <select name="continent" id="continent" onchange="javascript:phpajax_get_Province();">
    <?php  
    $str="select * from tbl_cep_province";
    $result=mysql_query($str);
        if($result){
            $i=1; 
            while($value=mysql_fetch_array($result)){
            ?>
        <option value="<?php echo $value['id'];?>">
        <?php echo $value['name'];?>
    </option>
        <?php       }
            $i++;
    }else{echo 'Can not select table number.';}?>
        <option value="ALL" selected="selected">Show all provinces</option>
        </select>
    </form>
            <table class="collape_main_contianer" border="0">
            <tr><td class="list_event_province">
            <div style="background-color:#00F; padding-left:5px; font-size:18px; font-weight:bold;">All Medias</div>
            <ul>
            <li><a href="">Download Video</a></li>
            <li><a href="">Download Audio</a></li>
            </ul>
            <div style="background-color:#00F; padding-left:5px; font-size:18px; font-weight:bold;">Total All Forum: <?php echo $_SESSION['sum'];?></div>
            </td></tr>

            <tr><td>

            <div class="detail_container">
            <!-- City details -->
                <div class="city_detail">
                  <!-- City -->
                      <h3>Choose a province</h3>
                      <p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula.</p>
                      <p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam.</p>
                      <p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula.</p>
                      <p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam.</p>
                      <p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula.</p>
                      <p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam.</p>
                      </div>
    </div>


            </td></tr>
            </table>

          </div>
            <div id="t2">return value here</div>
      <div id="left_content"><p class="grey" align="justify">
            <?php 
            $str="SELECT tbl_cep_province.id,tbl_cep_province.name FROM tbl_cep_province";
            $result=mysql_query($str);
            if($result){
                $i=1;
                while($get_values=mysql_fetch_array($result)){
                //$_SESSION['name_province']=$values['id'];
                $string="SELECT tbl_cep_province.name,count(province_id) AS c
                    FROM tbl_cep_forum
                    INNER JOIN tbl_cep_province ON tbl_cep_province.id = tbl_cep_forum.province_id
                    WHERE tbl_cep_forum.province_id='".$get_values['id']."'";

                $get_result=mysql_query($string);
                if($get_result){
                    $j=1;
                    while($value=mysql_fetch_array($get_result)){?>
                    <table cellpadding="0" cellspacing="1">
            <tr bgcolor="#ECECEC" onMouseOver="this.style.backgroundColor='transparent'" onMouseOut="this.style.backgroundColor='#ECECEC'">
                    <td style="width:150px; float:left; padding-left:10px;"><?php echo $value['name'];?></td><td style="padding-left:10px; width:30px; float:left;"><?php echo $value['c'];?></td></tr>
                    </table>
                        <?php
                        $j++;
                        }
                    }
                    $i++;
                    }           
                }
            ?>
            </p>
        </div>
            <div class="city_detail_container">
                <!-- City -->
                <div class="city_detail" id="sydney">
                    <img class="city_photo" src="images/cities/sydney.jpg" alt="sydney" width="75" height="75" />
                    <div class="city_info">
                        <h2>Sydney 123</h2>
                        <h3>Australia</h3>
                        <p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos commodo in interdum vitae leo.</p>
                    </div>
                </div>
                    <div class="clear_both"></div>
            </div><!--close city_detail_container-->
       </div><!--Close map_container-->
      </body>
    </html>

phpajax_get_uniq_province.php

    <?php
require("database/connect_conf.php");
    if(!connection()){
        echo 'Not connect: '.mysql_error();
        }else{
            connection();
            }
    if(!db_select()){
        echo 'Not connect to Dabatase: '.mysql_error();

        }else{
            db_select();
            }

if (isset($_POST['continent'])){
    $name=$_POST['continent'];
        ?>
    <script type="text/javascript">alert('The post name is set!');</script>
    <?php

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
return $xmlStr; 
} 
// Opens a connection to a MySQL server
    //include("images/template/dots.png");
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE name='$name'";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'description="' . parseToXML($row['description']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';


}else{
    ?>
    <script type="text/javascript">alert('Can not get post');</script>
    <?php
    }

?>

phpsqlajax_genxml.php

    <?php
    require("database/connect_conf.php");

    function parseToXML($htmlStr) 
    { 
    $xmlStr=str_replace('<','&lt;',$htmlStr); 
    $xmlStr=str_replace('>','&gt;',$xmlStr); 
    $xmlStr=str_replace('"','&quot;',$xmlStr); 
    $xmlStr=str_replace("'",'&#39;',$xmlStr); 
    $xmlStr=str_replace("&",'&amp;',$xmlStr); 
    return $xmlStr; 
    } 

    // Opens a connection to a MySQL server
        //include("images/template/dots.png");
        if(!connection()){
            echo 'Not connect: '.mysql_error();
            }else{
                connection();
                }
        if(!db_select()){
            echo 'Not connect to Dabatase: '.mysql_error();

            }else{
                db_select();
                }


    // Select all the rows in the markers table
    $query = "SELECT * FROM markers WHERE 1";
    $result = mysql_query($query);
    if (!$result) {
      die('Invalid query: ' . mysql_error());
    }

    header("Content-type: text/xml");

    // Start XML file, echo parent node
    echo '<markers>';

    // Iterate through the rows, printing XML nodes for each
    while ($row = @mysql_fetch_assoc($result)){
      // ADD TO XML DOCUMENT NODE
      echo '<marker ';
      echo 'name="' . parseToXML($row['name']) . '" ';
      echo 'address="' . parseToXML($row['address']) . '" ';
      echo 'description="' . parseToXML($row['description']) . '" ';
      echo 'lat="' . $row['lat'] . '" ';
      echo 'lng="' . $row['lng'] . '" ';
      echo 'type="' . $row['type'] . '" ';
      echo '/>';
    }

    // End XML file
    echo '</markers>';

    ?>

1 个答案:

答案 0 :(得分:0)

您的第一个戏剧可能是您使用$.load()函数和$.post()函数通过jQuery调用相同的PHP脚本:

$('#t2').load('phpajax_get_uniq_province.php').show();
var get_name=$('#continent').val();
$.post('phpajax_get_uniq_province.php', { continent: get_name },

我毫不怀疑这是许多问题中的第一个。您确实需要将代码分割成碎片,独立运行它们,使用Firebug或类似方法查看交互,然后在证明每个段没有错误时将其组合。