1. 第四組 停車場搜尋系統 第四組 溫允中 陳欣暉 蕭積遠 李雅俐

2. 本週進度 20111012

3. phpsqlajax_dbinfo.php 放置資料庫連線資訊 - 無法另外做存取 <?php $username=“[user]"; $password=“[password]"; $database=“ [database name]"; ?>

4. phpsqlajax_genxml3.php <?php require("phpsqlajax_dbinfo.php");. // Select all the rows in the markers table mysql_query('SET NAMES UTF8'); $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 ' '; // 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 'lat="'. $row['lat']. '" '; echo 'lng="'. $row['lng']. '" '; echo 'type="'. $row['type']. '" '; echo '/>'; } // End XML file echo ' '; ?>

5. phpsqlajax_genxml3.php 產生資料表內容

6. Test02.php var iconBlue = new GIcon(); iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; iconBlue.iconSize = new GSize(12, 20); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(6, 20); iconBlue.infoWindowAnchor = new GPoint(5, 1); 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);

7. var customIcons = []; customIcons["restaurant"] = iconBlue; customIcons["bar"] = iconRed; // � a � ϸ � T function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(22.99925, 120.25288), 15); // ����� Ʈw GDownloadUrl("phpsqlajax_genxml3.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(point, name, address, type); map.addOverlay(marker);

8. function createMarker(point, name, address, type) { var marker = new GMarker(point, customIcons[type]); var html = " " + name + " " + address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker;

10. 之前進度 20110928

11. mysql web 介面

12. 設定資料欄位類型

13. 建立一個名為 wholocations 的資料表 CREATE TABLE wholocations ( id int(11) NOT NULL auto_increment, lat decimal(10,6) NOT NULL default '0.000000', lon decimal(10,6) NOT NULL default '0.000000', description varchar(255) NOT NULL default '', PRIMARY KEY (id) ) TYPE=MyISAM;

14. 輸入你的 api key Who locations in London Who-locations in London

15. 讀取資料庫的資料和多個圖釘點的建立 //<![CDATA[ var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GScaleControl()); map.setCenter(new GLatLng(51.512161, -0.14110), 11, G_NORMAL_MAP); // Creates a marker whose info window displays the given number function createMarker(point, number) { var marker = new GMarker(point); // Show this markers index in the info window when it is clicked var html = number; GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);}); return marker; };

16. 透過 echo 的方式把圖釘點一個個產生出來 //]]>