显示文本值而不是ID

时间：2011-08-27 17:59:26

标签： php javascript google-maps-markers

我想知道是否有人可以帮助我。

我正在使用以下编码片段在mySQL数据库中的特定位置成功显示地图标记。

PHP代码 

<?php 
require("phpfile.php"); 

// Start XML file, create parent node 

$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node); 

// Opens a connection to a MySQL server 

$connection=mysql_connect ("hostname", $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 ('Can\'t use db : ' . mysql_error()); 
} 

// Select all the rows in the markers table 

$query = "SELECT locationid, detectorid, searchheadid FROM finds WHERE `locationid` = '43'"; 

$result = mysql_query($query); 
if (!$result) { 
die('Invalid query: ' . mysql_error()); 
} 

header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each 

while ($row = @mysql_fetch_assoc($result)){ 
// ADD TO XML DOCUMENT NODE 
$node = $dom->createElement("marker"); 
$newnode = $parnode->appendChild($node); 
$newnode->setAttribute("locationid",$row['locationid']); 
$newnode->setAttribute("detectorid",$row['detectorid']);
$newnode->setAttribute("searchheadid",$row['searchheadid']);
} 

echo $dom->saveXML(); 

?>

HTML CODE 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Location</title>
        <link rel="stylesheet" href="css/findsperlocationstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript"> 
            var customIcons = {
            Artefact: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Coin: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            Jewellery: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            // Creating a LatLngBounds object
            var bounds = new google.maps.LatLngBounds();

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:14, 
            mapTypeId: 'satellite' 
            }); 

            // Change this depending on the name of your PHP file 
            downloadUrl("phpfile.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker"); 
            var bounds = new google.maps.LatLngBounds(); 
            for (var i = 0; i < markers.length; i++) { 
            var locationid = markers[i].getAttribute("locationid"); 
            var detectorid = markers[i].getAttribute("detectorid"); 
            var searchheadid= markers[i].getAttribute("searchheadid"); 
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({ 
            map: map, 
            position: point, 
            title: 'Click to view details', 
            icon: icon.icon, 
            shadow: icon.shadow, 
            formdetectorid: detectorid,
            formsearchheadid: searchheadid,
            }); 
            bounds.extend(point); 
            map.fitBounds(bounds); 
            google.maps.event.addListener(marker, "click", function() {
            document.getElementById('detectorid').value = this.formdetectorid;
            document.getElementById('searchheadid').value = this.formsearchheadid;
            }); 
            } 
            }); 
            } 

            function downloadUrl(url, callback) { 
            var request = window.ActiveXObject ? 
            new ActiveXObject('Microsoft.XMLHTTP') : 
            new XMLHttpRequest; 

            request.onreadystatechange = function() { 
            if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request, request.status); 
            } 
            }; 

            request.open('GET', url, true); 
            request.send(null); 
            } 

            function doNothing() {} 

            </script> 
            </head> 
            <body onLoad="load()">
                <form name="findsperlocation" id="findsperlocation">
                    <p align="left"><label>Location id<br />
                        </label>
                    </p>
                    <div>
                        <div align="left">
                            <input name="locationid" type="text" id="locationid" value="43" readonly="readonly"/>
                        </div>
                    </div>
                    <p align="left"><label>Detector Used</label>&nbsp;</p>
                    <div>
                        <div align="left">
                            <input name="detectorid" type="text" id="detectorid" size="30" maxlength="30"/>
                        </div>
                    </div>
                    <p align="left"><label>Search Head Used</label>&nbsp;</p>
                    <div>
                        <div align="left">
                            <input name="searchheadid" type="text" id="searchheadid" size="30" maxlength="30"/>
                        </div>
                    </div>
                                            </form>
                            <div id="map"></div>
                        </body> 
                        </html>

我遇到的问题涉及我的两个领域，'detectorid'和'searchheadid'。这些字段的信息通过另一个表单上的两个下拉菜单保存。下拉菜单显示供用户选择的适当文本值，但与每个选择关联的“id”值将保存到上述代码段中使用的表中。

我希望能够做到的，如果可能的话，而不是在这种形式中显示'id'值，我想将其转换回适当的文本值。文本值保存在两个单独的表中，“探测器”和“搜索头”，但我必须承认，我真的不知道从哪里开始。

我只是想知道是否有人可以告诉我我需要做些什么才能显示这些信息。

非常感谢和亲切的问候

克里斯

1 个答案:

答案 0 :(得分：0)

好吧，通常当你有一个下拉列表时，每个<option>都有一个value=和一个内容。 例如，您可以从数据库中检索正确的ID和标题列表，该列表应如下所示：

<select name="id">
    <option value="1567">My City</option><!-- this is ID=1567 with title=My City-->
    <option value="1322">Example City</option><!-- this is ID=1322 and title=Example City-->
</select>

表单在提交时会返回从下拉列表中选择的正确ID，而不是其标题。 所有你不必担心的是有一个SQL查询给你带有ID的位置列表，你只需循环它们并使它们生成一个具有上述格式的列表。 一个例子PHP＆amp; MySQL代码很简单：

<?php
$query = mysql_query("SELECT * FROM `saved_locations` WHERE `user` = '{$myUser}'");
echo '<select name="id">';
while ($row = mysql_fetch_object($query)) {
    echo '
    <option id="'.$row->id.'">'.$row->title.'</option>';
}
echo '
</select>';
?>
相关问题
最新问题