第四組 停車場搜尋系統 第四組 溫允中 陳欣暉 蕭積遠 李雅俐
建立mysql 資料表[完成] Google maps 連接 mysql[除錯中] Google map api版本問題
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 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; };
透過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>
注意~現在map api為第三版 <script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true&key=[api key]w"type="text/javascript"></script> Api有分成2,3版本，請參閱詳細文件