最近在找一些資料
能夠將經緯度以及一些HTML資訊,在GOOGLE MAPS產生一些圖釘點的時候
可以順便從資料庫讀取資料回來
有興趣的朋友們可以一起研究
首先先建立一個名為wholocations的資料表
內有id,lat&lon(經緯度),description(內文或HTML語法)
複製內容到剪貼板
代碼:
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;
再來就是將HEADER的部份填入您的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>
緊接著要設定地圖的一些屬性和控制項,大致上只要修改中心點就可以了
在這裡有一個名為 createMarker 的function是要用來接收php傳來的echo值
以便可以讀取資料庫的資料和多個圖釘點的建立
複製內容到剪貼板
代碼:
<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;
};
最後則是將php的資料庫資訊填入,如資料庫位置,資料庫名稱,使用者名稱/密碼
填入之後該php程式就會自資料庫裡去將所有的經緯度,description資訊帶出來
透過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>
資料來源:Google Maps via PHP/Mysql Tutorial - API version 2
http://www.map-server.com/googlemaps/tutorial_api2.html