Google地图接口研究与应用.doc

Google地图接口研究与应用 - PHP/MySQL与Google地图结合应用将 Google Maps 与 MySQL 数据库配合使用，总共分四个步骤：1. 创建表2. 填写表3. 使用PHP输出XML4. 创建地图创建表创建 MySQL 表时，您应当特别注意 lat 和 lng 属性。鉴于 Google Maps 目前的缩放能力，您只需要精确到小数点后六位数。为了让表占用的存储空间降至最低，您可以将 lat 和 lng 属性指定为大小是 (10,6) 的浮点数。这样，这些字段将会存储小数点后 6 位数以及小数点前最多 4 位数，如 -123.456789 度。您的表中还应当有一个充当主键的 id 属性，以及一个用于区分饭店和酒吧的 type 属性。创建表的SQL语句CREATE TABLE markers ( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY , name VARCHAR( 60 ) NOT NULL , address VARCHAR( 80 ) NOT NULL , lat FLOAT( 10, 6 ) NOT NULL , lng FLOAT( 10, 6 ) NOT NULL , type VARCHAR( 30 ) NOT NULL ，) ENGINE = MYISAM ;填写表创建表后，应向表中填写数据。下文中提供了西雅图的 10 个场所的示例数据。在 phpMyAdmin 中，您可以使用 IMPORT 标签导入各种文件格式，包含 CSV（逗号分隔值）。Microsoft Excel 和 Google 电子表格都可以导出为 CSV 格式，因此您可以通过导入/导出 CSV 文件将电子表格中的数据轻松传送到 MySQL 表中。表的效果如下：执行相同操作的SQL语句INSERT INTO markers (name, address, lat, lng, type) VALUES (南昌航空大学, 丰和南大道696号, 28.652000, 115.825996, school);INSERT INTO markers (name, address, lat, lng, type) VALUES (南昌航空大学老校区, 南昌市上海路173号, 28.657900, 115.940300, school);INSERT INTO markers (name, address, lat, lng, type) VALUES (滕王阁, 南昌市东湖区沿海路, 28.680260, 115.881599, scenic);INSERT INTO markers (name, address, lat, lng, type) VALUES (江西理工大学, 赣州市红旗大道86号, 28.740999, 115.876801, school);使用 PHP 输出 XML将数据库连接信息保存到一个单独的文件中这时，您需要编写一些PHP语句将表数据导出为 XML 格式，这样，地图可以通过异步 Javascript 调用进行检索我使用 PHP 的 DOM 函数输出 XML：在 PHP 中，首先会初始化一个新的 XML 文档，并创建“标记”父节点。然后连接到数据库，在标记表中执行 SELECT *（选择所有项）查询，然后循环访问查询结果。为表中的每一行（每个位置）创建一个以行属性为 XML 属性的新 XML 节点，并将其附加到父节点。然后将 XML 转储到屏幕。 代码如下createElement(markers);$parnode = $dom-appendChild($node); / Opens a connection to a MySQL server$connection=mysql_connect (localhost, $username, $password);if (!$connection) die(Not connected : . mysql_error(); / Set the active MySQL database$db_selected = mysql_select_db($database, $connection);if (!$db_selected) die (Cant use db : . mysql_error(); / Select all the rows in the markers table$query = SELECT * FROM markers WHERE 1;$result = mysql_query($query);if (!$result) die(Invalid query: . mysql_error(); header(Content-type: text/xml); / Iterate through the rows, adding XML nodes for eachwhile ($row = mysql_fetch_assoc($result) / ADD TO XML DOCUMENT NODE $node = $dom-createElement(marker); $newnode = $parnode-appendChild($node); $newnode-setAttribute(name,$rowname); $newnode-setAttribute(address, $rowaddress); $newnode-setAttribute(lat, $rowlat); $newnode-setAttribute(lng, $rowlng); $newnode-setAttribute(type, $rowtype); echo $dom-saveXML();?检查 XML 输出是否有效创建地图一旦 XML 在浏览器中开始正常运行后，您就可以通过 JavaScript 实际地创建地图了。如果您从未创建过 Google Maps，请先尝试创建文档中介绍的一些基本示例，从而确保您掌握了创建 Google Maps 的基础知识。 载入 XML 文件要将 XML 文件载入页面，您可以利用 API 函数 GDownloadURL。GDownloadURL 是 XMLHttpRequest（用于从 HTML 页面所驻留的服务器请求 XML 文件）的包装器。GDownloadURL 的第一个参数是文件路径，通常，最简单的办法是将 XML 文件与 HTML 文件放在同一个目录，这样，您通过文件名便可引用文件。GDownloadURL 的第二个参数是在 XML 返回到 Javascript 时调用的函数。GDownloadUrl(phpsqlajax_genxml.php, function(data) var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName(marker); for (var i = 0; i markers.length; i+) var name = markersi.getAttribute(name); var address = markersi.getAttribute(address); var type = markersi.getAttribute(type); var point = new GLatLng(parseFloat(markersi.getAttribute(lat), parseFloat(markersi.getAttribute(lng); var marker = createMarker(point, name, address, type); map.addOverlay(marker); );创建自定义图标您可以使用 GIcon 类定义自定义图标，这些图标稍后可以指定给标记。开始先声明两个 GIcon 对象（iconBlue 和 iconRed），然后定义它们的属性 var iconBlue = new GIcon(); iconBlue.image = /ridefinder/images/mm_20_blue.png; iconBlue.shadow = /ridefinder/images/mm_20_shadow.png; iconBlue.iconSize = new GSize(12, 20); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(6, 20); iconBWindowAnchor = new GPoint(5, 1); var iconRed = new GIcon(); iconRed.image = /ridefinder/images/mm_20_red.png; iconRed.shadow = /ridefinder/images/mm_20_shadow.png; iconRed.iconSize = new GSize(12, 20); iconRed.shadowSize = new GSize(22, 20); iconRed.iconAnchor = new GPoint(6, 20); iconRWindowAnchor = new GPoint(5, 1); var customIcons = ; customIconsrestaurant = iconBlue; customIconsbar = iconRed;创建标记和信息窗口您应该将所有标记创建代码都置于 createMarker 函数中。您可以通过使用类型作为已全局定义的关联数组的键检索合适的 GIcon，并将其传递到 GMarker 构造函数中。然后，将名称、地址以及一些用于加粗名称的 标签合在一起，形成您想要在信息窗口中显示的 HTML。function createMarker(point, name, address, type) var marker = new GMarker(point, customIconstype); var html = + name + + address; GEvent.addListener(marker, click, function() marker.openInfoWindowHtml(html); ); return marker;绑定到一起至此，您有了一个将标记、图标和 XML 绑定到一起的 Web 页面。载入此页面时，系统会调用 load 函数。此函数将会建立地图，然后调用 GDownloadUrl。确保 GDownloadUrl 传入将会输出 XML 的文件，并且您可以在浏览器中预览 XML。 Google Maps AJAX + MySQL/PHP Example /!CDATA var iconBlue = new GIcon(); iconBlue.image = /ridefinder/images/mm_20_blue.png; iconBlue.shadow = /ridefinder/images/mm_20_shadow.png; iconBlue.iconSize = new GSize(12, 20); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(6, 20); iconBWindowAnchor = new GPoint(5, 1); var iconRed = new GIcon(); iconRed.image = /ridefinder/images/mm_20_red.png; iconRed.shadow = /ridefinder/images/mm_20_shadow.png; iconRed.iconSize = new GSize(12, 20); iconRed.shadowSize = new GSize(22, 20); iconRed.iconAnchor = new GPoint(6, 20); iconRWindowAnchor = new GPoint(5, 1); var customIcons = ; customIconsrestaurant = iconBlue; customIconsbar = iconRed; function load() if (GBrowserIsCompatible() var map = new GMap2(document.getElementById(map); map.addControl(new GSmallMapControl(); map.addControl(new GMapTypeControl(); map.setCenter(new GLatLng(47.614495, -122.341861), 13); GDownloadUrl(phpsqlajax_genxml.php, function(data) var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName(marker); for (var i = 0; i markers.len