線上書籍

Home

[982]PHP網站開發 進階應用技巧

<?php
$root_pass="12345";    //資料庫root密碼
$db_name="test";  //資料庫名稱

/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass);  //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'");  //設定語系
error_reporting(0);

if($_POST['op']=="save"){
  save_map();
}

//儲存地圖
function save_map(){
    $sql="insert into `gmap` (`latlng`,`name`) values ('{$_POST['latlng']}','{$_POST['name']}')";
    mysql_query($sql) or die($sql);
    header("location:index.php");
}

//抓出資料
function list_map(){
    $sql="select `latlng`,`name` from `gmap`";
    $result=mysql_query($sql) or die($sql);
    $main="<ol>";
    while(list($latlng,$name)=mysql_fetch_row($result)){
        $main.="<li style='color:white;'>
        <a href=\"javascript:showAddress('$latlng','$name');\"  style='color:white;'>$name</a>
        </li>";
    }
    $main.="</ol>";
    return $main;
}
?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAiaUztwQS-JKG0vf5W_QNPhRjgqXnQAbwVQohZoocwCPRm4POpxSO7Yb0Dfgh3asVzIS3quES0hQflA"></script>

  <script type="text/javascript">
  google.load("maps", "2");

    var geocoder= null;
    var map = null;

  //頁面載入完成後,執行以下函數(定位地圖起點)
  function initialize() {

    map = new google.maps.Map2(document.getElementById("my_map"));
        geocoder = new GClientGeocoder();

        var point = new GLatLng(23.009513,120.211242);

    map.setCenter(point, 17);

    //加入節點
    //var marker=new GMarker(point, {draggable: true ,bouncy:true });
      //map.addOverlay(marker);

      //大型平移/縮放控制項
      map.addControl(new GLargeMapControl());
      //比例尺
      map.addControl(new GScaleControl());
      //地圖屬性切換
      map.addControl(new GMapTypeControl());
      //移除衛星按鈕
      map.removeMapType(G_SATELLITE_MAP);
      //新增地形按鈕
      map.addMapType(G_PHYSICAL_MAP);

      //地圖縮圖
      map.addControl(new GOverviewMapControl());

  }

    function showAddress(address , show_title) {
        geocoder.getLatLng(
            address,
            function(point) {
                if (!point) {
                    alert("找不到『" + address + "』");
                } else {
                    map.setCenter(point, 17);
                    var marker = new GMarker(point, {draggable: true ,bouncy:true});
                    map.addOverlay(marker);
                    marker.openInfoWindowHtml( show_title +"<br /><font color=blue>" + address + "</font>");

                    document.getElementById("latlng").value = point.toString();
                    document.getElementById("name").value = address;

                    GEvent.addListener(marker, "dragend", function() {
                        var markerLatLng = marker.getLatLng();
                      document.getElementById("latlng").value = markerLatLng.toString();
                    });
                }
            }
        );
    }

  google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body onunload="GUnload()" bgcolor="#000000">

    <table align="center"><tr><td>

        <form action="#" onsubmit="showAddress(this.address.value,''); return false" style="display:inline;">
            <input type="text" name="address" value="" style="width:450px;font-size:20px;" />
            <input type="submit" value="查詢" style="font-size:20px;" />
        </form>

        <form action="index.php" method="post" style="display:inline;">
            <input type="hidden" name="name" id="name" value=""/>
            <input type="hidden" name="latlng" id="latlng" value=""/>
            <input type="hidden" name="op" value="save"/>
            <input type="submit" value="儲存" style="font-size:20px;" />
        </form>

    </td><td rowspan="2" valign="top">

    <?php echo list_map();?>

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

        <div id="my_map" style="width: 600px; height: 300px;margin-top:4px;"></div>

    </td></tr>
    </table>
  </body>
</html>