index.php

17-1 index.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>