原來把Google map放在網頁上還挺容易的!!
我的成果
不過我的目的不只是要放一個點，還要放很多點，而且要從資料庫內抓點來放!!
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
//設定要顯示的控制項
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addMapType(G_PHYSICAL_MAP);
//決定你 Google 地圖的中心點位置(緯度, 經度)和縮放大小以及預設的地圖模式
map.setCenter(new GLatLng(23.753611, 120.3), 8, G_HYBRID_MAP);
</script>
//已經將資料放在陣列 $loc 中
//因為資料庫的經緯度資料是度分秒的，所以要先將他們轉成二度分帶
//先用php做個迴圈讀資料，然後再用javascript將每一個點點上去
<?php
for ($i=0;$i<count($loc);$i++){
$loc[$i]['Y']=$loc[$i]['DegY']+$loc[$i]['MinY']/60+$loc[$i]['SecY']/3600;
$loc[$i]['X']=$loc[$i]['DegX']+$loc[$i]['MinX']/60+$loc[$i]['SecX']/3600;
?>
<script type="text/javascript">
//標示在 Google 地圖上的經緯度
var point<?php echo $i;?> = new GLatLng(<?php echo $loc[$i]['Y'];?>, <?php echo $loc[$i]['X'];?>);
var marker<?php echo $i;?> = new GMarker(point<?php echo $i;?>);
map.addOverlay(marker<?php echo $i;?>);
//在地圖上放置標點說明，可以放文字、連結、圖，就如同一班html的寫法
var html<?php echo $i;?> = "<?php echo $i;?>";
GEvent.addListener(marker<?php echo $i;?>, "click", function() {
marker<?php echo $i;?>.openInfoWindowHtml(html<?php echo $i;?>);
});
map.addOverlay(marker<?php echo $i;?>);
//]]>
</script>
<?php };?>
這樣就可以在同一張圖上顯示很多點了，而且還可以有內容說明喔
參考資料:
Google Map 的中文製作簡介
Google Maps API 實作範例
2010年8月16日 星期一
2010年3月4日 星期四
自動完成 autocomplete
最近花了一段時間在搞這個東西。就是希望在表單的文字框輸入文字時，可以連結到資料庫尋找相關的字詞以提供使用者參考，像是在google搜尋時，輸入一個a，就會出現建議選單。
因為對寫程式做網頁還很粗淺，很多時候連要用什麼關鍵字來查詢都不確定，先是花了一段時間瞭解我要的功能叫『自動完成』，又花了一段時間搞懂該如何在網站上使用。
這是一個jQuery的套件，jQuery是JavaScript的函式庫。話說我連JavaScript都還看不懂了，一開始時壓根搞不清楚要如何使用這個別人寫好的套件...。買了兩本書來研究，終於還是被我給研究成功了。哈哈。雖然只是會用，內部的東西還是不太清楚，但能用就好了嗎是不。
我是下載這個網站的Autocomplete套件。
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
內含有的功能很多，我僅先選取最基本的部份來做。
要使用的檔案有
1.jquery.js - 在lib資料夾下。這是jQuery的基本檔，要用套件前必須先載入這個檔。
2.jquery.autocomplete.js - 自動完成的套件。包含自動完成的基本功能。
3.jquery.autocomplete.css - 為建議選單的樣式。
先載入以上檔案。
在body內建立表單文字框。
在文字框下加入自動完成的程式碼。
在預設狀態中，建議選單一次只會出現10筆，若希望出現多一點，可至 jquery.autocomplete.js 檔案中的第一段修改。
將10改成想要的數字即可。
前面所說的設定也可以直接在 jquery.autocomplete.js 檔案中更改預設值。
我的資料是用php連結資料庫所產生。
表單會傳送給php的是 $_GET['q']，所以要以 $_GET['q'] 為查詢參數，例如:
而最後要將每一個值一一讀出。
建議選單的資料載入有兩種方式，一種是像我用的以php連結資料庫的方式，另一個是直接鍵入資料的方式。因為我是用資料庫產生選單的，所以只介紹這一種，另一種方式請參考: http://jsgears.com/thread-114-1-1.html
因為對寫程式做網頁還很粗淺，很多時候連要用什麼關鍵字來查詢都不確定，先是花了一段時間瞭解我要的功能叫『自動完成』，又花了一段時間搞懂該如何在網站上使用。
這是一個jQuery的套件，jQuery是JavaScript的函式庫。話說我連JavaScript都還看不懂了，一開始時壓根搞不清楚要如何使用這個別人寫好的套件...。買了兩本書來研究，終於還是被我給研究成功了。哈哈。雖然只是會用，內部的東西還是不太清楚，但能用就好了嗎是不。
我是下載這個網站的Autocomplete套件。
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
內含有的功能很多，我僅先選取最基本的部份來做。
要使用的檔案有
1.jquery.js - 在lib資料夾下。這是jQuery的基本檔，要用套件前必須先載入這個檔。
2.jquery.autocomplete.js - 自動完成的套件。包含自動完成的基本功能。
3.jquery.autocomplete.css - 為建議選單的樣式。
先載入以上檔案。
<head>...
<link href="../css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.autocomplete.js" type="text/javascript"></script>
...
</head>
在body內建立表單文字框。
<input type="text" name="ref[author]" id="author" class="author_choice" />
在文字框下加入自動完成的程式碼。
<script type="text/javascript">
$(function(){
$("#author").focus().autocomplete("authorlist.php", {
//author為文字框的id。資料來源為authorlist.php檔
//有許多參數可以設定，以下列出可能會用到的:
minChars:0,
//當輸入多少字元時出現建議選單，若設定為0，則當文字框被點選而尚未有文字輸入時，也會有建議選單出現
width: 200,
//建議選單的寬度
selectFirst: true,
//自動選取建議選單的第一個值
scrollHeight: 300,
//設定建議選單產生捲軸 (scroll: true(預設))時可以設定建議選單的高度
autoFill: true
//自動在文字框欄位中填入建議值
});
});
</script>
在預設狀態中，建議選單一次只會出現10筆，若希望出現多一點，可至 jquery.autocomplete.js 檔案中的第一段修改。
$.fn.extend({
autocomplete: function(urlOrData, options) {
var isUrl = typeof urlOrData == "string";
options = $.extend({}, $.Autocompleter.defaults, {
url: isUrl ? urlOrData : null,
data: isUrl ? null : urlOrData,
delay: isUrl ? $.Autocompleter.defaults.delay : 10,
max: options && !options.scroll ? 10 : 150
}, options);
將10改成想要的數字即可。
前面所說的設定也可以直接在 jquery.autocomplete.js 檔案中更改預設值。
我的資料是用php連結資料庫所產生。
表單會傳送給php的是 $_GET['q']，所以要以 $_GET['q'] 為查詢參數，例如:
<?php
$param=$_GET['q'];
mysql_select_db($database_PlantName, $PlantName);
$query_author = "SELECT distinct total_sp.author FROM total_sp where author like '$param%'";
?>
而最後要將每一個值一一讀出。
<?php
$author = mysql_query($query_author, $PlantName) or die(mysql_error());
$row_author = mysql_fetch_assoc($author);
$totalRows_author = mysql_num_rows($author);
do {
echo $row_author['author']."\n";
} while ($row_author = mysql_fetch_assoc($author));
?>
建議選單的資料載入有兩種方式，一種是像我用的以php連結資料庫的方式，另一個是直接鍵入資料的方式。因為我是用資料庫產生選單的，所以只介紹這一種，另一種方式請參考: http://jsgears.com/thread-114-1-1.html
訂閱：
文章 (Atom)
