PHP连接mysql数据库，调用Google Map显示不同地方地图信息，使用Javascript弹出悬浮信息窗口展示。

PHP连接mysql数据库，调用Google Map显示不同地方地图信息，使用Javascript弹出悬浮信息窗口展示。

#cat db_map4.php

    <?php
        $username = "tom";
        $dbName = "test";
        $tableName = "IDC";
        $psword = "tom";
        $hostname = "127.0.0.1";
        $logon_flag = 0;
        $server_link = mysql_connect("localhost","$username","$psword")
                or die("Can't connect to server" . mysql_error());
        if($server_link){
           echo "Connect successfully!<br>";
           $logon_flag = 1;
        }

        if($logon_flag == 0){
          echo "<script language='javascript'>";
          echo "alert('Sorry,Wrong userName or Password!');";
          echo "history.back();";
          echo "</script>";
        }

        if($logon_flag == 1){
        
          $db_link = mysql_select_db("$dbName",$server_link) or die ("Can't use database f2:" . mysql_error());
          $sql = "SELECT * FROM $tableName";
          $result = mysql_query($sql,$server_link) or die("Invalid query:" . mysql_error());
          $i = 0;
          while($rows = mysql_fetch_array($result)){
           // $arr1[$i][0] = $rows["id"];
           // $arr1[$i][1] = $rows["a"];
            //$arr1[$i][2] = $rows["b"];
            //$arr1[$i][3] = $rows["c"];
            $address[$i] = $rows["IDC_NAME"];
            $delay_time[$i] = $rows["Delay_Time"];
            $i++;
          }
          mysql_free_result($result);

          mysql_close($server_link);
         // $address = $arr1[2][1];
          //$delay = $arr1[2][0];

        }
    ?>

<html>
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script type="text/javascript"  
        src="http://maps.google.com/maps/api/js?sensor=false"></script>  
    <script type="text/javascript">  
        var geocoder;  
        var map;  
        //实际查询地址  
        //var query = "辽宁沈阳文化路三号巷11号";  
        var query = "东北大学北门";  
        //显示名称  
        //var display = "<b>单位：</b>东北大学";  
        var display = "<b>Delay：</b><?php echo "$delay_time[0]" ?>";  
        function initialize() {  
            geocoder = new google.maps.Geocoder();  
            var myOptions = {  
                zoom : 1,//缩放比例  
                //地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE   
                //•MapTypeId.HYBRID •MapTypeId.TERRAIN   
                mapTypeId : google.maps.MapTypeId.ROADMAP  
            }  
            map = new google.maps.Map(document.getElementById("map_canvas"),  
                    myOptions);  
            codeAddress();  
            codeAddress1();  
            codeAddress2();  
        }  
        function codeAddress() {  
            //var address = query;  
            var address = "<?php echo "$address[0]" ?>";  
            var display = "<b>Delay：</b><?php echo "$delay_time[0]" ?>" + " ms";  //javascript引用php变量
            //地址解析  
            geocoder.geocode({  
                'address' : address  
            }, function(results, status) {  
                if (status == google.maps.GeocoderStatus.OK) {  
                    //依据解析的经度纬度设置坐标居中  
                    map.setCenter(results[0].geometry.location);  
                    var marker = new google.maps.Marker({  
                        map : map,  
                        position : results[0].geometry.location,  
                        title : address,  
                        //坐标动画效果  
                        animation : google.maps.Animation.DROP  
                    });  
                    var infowindow = new google.maps.InfoWindow({  
                        content : "<span style='font-size:11px'><b>IDC：</b>"  
                                + address + "<br>" + display + "</span>",  
                        //坐标偏移量，一般不用修改  
                        pixelOffset : 0,  
                        position : results[0].geometry.location  
      
                    });  
                    //默认打开信息窗口,点击做伴弹出信息窗口  
                    infowindow.open(map, marker);  
                    google.maps.event.addListener(marker, 'click', function() {  
                        infowindow.open(map, marker);  
                    });  
                } else {  
                    alert("未能解析该地址的原因: " + status);  
                }  
            });  
        }  

        function codeAddress1() {  
            //var address = query;  
            var address = "<?php echo "$address[1]" ?>";  
            var display = "<b>Delay：</b><?php echo "$delay_time[1]" ?>" + " ms";  
            //地址解析  
            geocoder.geocode({  
                'address' : address  
            }, function(results, status) {  
                if (status == google.maps.GeocoderStatus.OK) {  
                    //依据解析的经度纬度设置坐标居中  
                    map.setCenter(results[0].geometry.location);  
                    var marker = new google.maps.Marker({  
                        map : map,  
                        position : results[0].geometry.location,  
                        title : address,  
                        //坐标动画效果  
                        animation : google.maps.Animation.DROP  
                    });  
                    var infowindow = new google.maps.InfoWindow({  
                        content : "<span style='font-size:11px'><b>IDC：</b>"  
                                + address + "<br>" + display + "</span>",  
                        //坐标偏移量，一般不用修改  
                        pixelOffset : 0,  
                        position : results[0].geometry.location  
      
                    });  
                    //默认不打开信息窗口,点击做伴弹出信息窗口  
                    //infowindow.open(map, marker);  
                    google.maps.event.addListener(marker, 'click', function() {  
                        infowindow.open(map, marker);  
                    });  
                } else {  
                    alert("未能解析该地址的原因: " + status);  
                }  
            });  
        }


        function codeAddress2() {  
            //var address = query;  
            var address = "<?php echo "$address[2]" ?>";  
            var display = "<b>Delay：</b><?php echo "$delay_time[2]" ?>" + " ms";  
            //地址解析  
            geocoder.geocode({  
                'address' : address  
            }, function(results, status) {  
                if (status == google.maps.GeocoderStatus.OK) {  
                    //依据解析的经度纬度设置坐标居中  
                    map.setCenter(results[0].geometry.location);  
                    var marker = new google.maps.Marker({  
                        map : map,  
                        position : results[0].geometry.location,  
                        title : address,  
                        //坐标动画效果  
                        animation : google.maps.Animation.DROP  
                    });  
                    var infowindow = new google.maps.InfoWindow({  
                        content : "<span style='font-size:11px'><b>IDC：</b>"  
                                + address + "<br>" + display + "</span>",  
                        //坐标偏移量，一般不用修改  
                        pixelOffset : 0,  
                        position : results[0].geometry.location  
      
                    });  
                    //默认不打开信息窗口,点击做伴弹出信息窗口  
                    //infowindow.open(map, marker);  
                    google.maps.event.addListener(marker, 'click', function() {  
                        infowindow.open(map, marker);  
                    });  
                } else {  
                    alert("未能解析该地址的原因: " + status);  
                }  
            });  
        }




    </script>  
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width: 600px; height: 400px;"></div>
    </body>
    </html>

结果截图：

数据表IDC内容及表结构截图如下：