第四組停車場搜尋系統

第四組停車場搜尋系統

第四組溫允中陳欣暉蕭積遠李雅俐

本週進度 20111019

phpsqlajax_dbinfo.php

放置資料庫連線資訊 - 無法另外做存取

<?php$username=“[user]";$password=“[password]";$database=“ [database name]";?>

phpsqlajax_genxml3.php<?phprequire("phpsqlajax_dbinfo.php");.....

// Select all the rows in the markers tablemysql_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 nodeecho '<markers>';

// Iterate through the rows, printing XML nodes for eachwhile ($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 fileecho '</markers>';

?>

phpsqlajax_genxml3.php 產生資料表內容

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);

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);

function createMarker(point, name, address, type) {

var marker = new GMarker(point, customIcons[type]);

var html = "<b>" + name + "</b> <br/>" + address;

GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker;

新增搜尋功能

之前進度 20110928

mysql web 介面

設定資料欄位類型

建立一個名為 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;

輸入你的 api key

<html><head><title>Who locations in London</title><script src="http://maps.google.com/maps?file=api&v=2&key=[your Google Maps key]" type="text/javascript"></script></head><body><p><strong>Who-locations in London</strong></p><div id="map" style="width: 800px; height: 600px"></div>

讀取資料庫的資料和多個圖釘點的建立• <script type="text/javascript">

//<![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 numberfunction createMarker(point, number){var marker = new GMarker(point);// Show this markers index in the info window when it is clickedvar html = number;GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});return marker;};

透過 echo 的方式把圖釘點一個個產生出來

• <?php$link = mysql_connect("[database server]", "[username]", "[password]") or die("Could not connect: " . mysql_error());mysql_selectdb("[database name]",$link) or die ("Can\'t use dbmapserver : " . mysql_error());$result = mysql_query("SELECT * FROM wholocations",$link);if (!$result){echo "no results “;}while($row = mysql_fetch_array($result)){echo "var point = new GLatLng(" . $row['lat'] . "," . $row['lon'] . ");\n";echo "var marker = createMarker(point, '" . addslashes($row['description']) . "');\n";echo "map.addOverlay(marker);\n";echo "\n";}mysql_close($link);?>//]]></script></body></html>

Documents

第四組 停車場搜尋系統

第四組停車場搜尋系統