Question

我正在使用下面的PHP和AJAX编码来填充显示存储在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 findid, locationid, findosgb36lat, findosgb36lon, dateoftrip, findcategory, findname, finddescription, pasref, findimage, additionalcomments FROM finds WHERE `locationid` = '2'"; 

$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("findid",$row['findid']); 
$newnode->setAttribute("locationid",$row['locationid']); 
$newnode->setAttribute("findosgb36lat",$row['findosgb36lat']);
$newnode->setAttribute("findosgb36lon",$row['findosgb36lon']);
$newnode->setAttribute("dateoftrip",$row['dateoftrip']); 
$newnode->setAttribute("findcategory",$row['findcategory']); 
$newnode->setAttribute("findname",$row['findname']); 
$newnode->setAttribute("finddescription",$row['finddescription']); 
$newnode->setAttribute("pasref",$row['pasref']);
$newnode->setAttribute("findimage",$row['findimage']);
$newnode->setAttribute("additionalcomments",$row['additionalcomments']);

} 

echo $dom->saveXML(); 

?>

HTML代码

<!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>Finds Per 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 findid = markers[i].getAttribute("findid");
            var locationid = markers[i].getAttribute("locationid"); 
            var dateoftrip = markers[i].getAttribute("dateoftrip");
            var findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var pasref = markers[i].getAttribute("pasref");
            var findimage= markers[i].getAttribute("findimage");
            var additionalcomments= markers[i].getAttribute("additionalcomments");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            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
            }); 
            bounds.extend(point);
            map.fitBounds(bounds);
            } 
            }); 
            } 

            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="2" readonly="readonly"/>
                </div>
              </div>
              <p align="left"><label>Date of Trip<br />
              </label>
              </p>
              <div>
                <div align="left">
                  <input name="dateoftrip" type="text" id="dateoftrip" readonly="readonly"/>
              </div>
              </div>
              <p align="left">
                <label></label>
                <label>Find Category</label>
              </p>
              <div>
                <div align="left">
                  <input name="findcategory" type="text" id="findcategory" size="10"readonly="readonly"/>
              </div>
              </div>
              <p align="left">
                <label>Find Name</label>
              </p>
              <div>
                <div align="left">
                  <input name="findname" type="text" id="findname" size="35" readonly="readonly"/>
                </div>
              </div>
              <p align="left"><label>Find Description</label>&nbsp;</p>
              <div>
                <div align="left">
                  <input name="finddescription" type="text" id="finddescription" size="100"readonly="readonly"/>
                </div>
              </div>
                <p align="left">
                <label>
                <label>PAS Ref.  </label>
              </p>
              <div>
                <div align="left">
                  <input name="pasref" type="text" id="pasref" readonly="readonly"/>
                </div>
              </div>
              <p align="left"><label>Additional Comments</label>
              </p>
              <div>
                <div align="left">
                  <textarea name="additionalcomments" cols="50" rows="12" id="additionalcomments" readonly="readonly"></textarea>
                </div>
              </div>
              <p align="left"><br />  
                </label>
              </p>
              <div>
                <div align="left"></div>
              </div>
            </form>
            <div id="map"></div>
            </body> 
</html>

我想我已经走了一半，因为我正在漫无目的地从数据库中提取所有信息。我在网络浏览器中运行php脚本时可以看到这一点，但我不确定下一步该怎么做。

接下来我需要做什么？

更新代码

<!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>Finds Per 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 findid = markers[i].getAttribute("findid");
            var locationid = markers[i].getAttribute("locationid"); 
            var dateoftrip = markers[i].getAttribute("dateoftrip");
            var findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var detectorname = markers[i].getAttribute("detectorname");
            var searchheadname = markers[i].getAttribute("searchheadname");
            var detectorsettings = markers[i].getAttribute("detectorsettings");
            var pasref = markers[i].getAttribute("pasref");
            var findimage= markers[i].getAttribute("findimage");
            var additionalcomments= markers[i].getAttribute("additionalcomments");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            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,
            formdateoftrip: "dateoftrip",
            formfindcategory: "findcategory"
            }); 
            bounds.extend(point);
            map.fitBounds(bounds);
            } 
            google.maps.event.addListener(marker, "click", function() {   alert("Associated data: " + this.formdateoftrip + ", " + this.findcategory); }); 
            }); 
            } 


            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="2" readonly="readonly"/>
                </div>
              </div>
              <p align="left"><label>Date of Trip<br />
              </label>
              </p>
              <div>
                <div align="left">
                  <input name="dateoftrip" type="text" id="dateoftrip" readonly="readonly"/>
              </div>
              </div>
              <p align="left">
                <label></label>
                <label>Find Category</label>
              </p>
              <div>
                <div align="left">
                  <input name="findcategory" type="text" id="findcategory" size="10"readonly="readonly"/>
              </div>
              </div>

              </form>
            <div id="map"></div>
            </script>
            </body> 
</html>

CODE SNIPPET

var marker = new google.maps.Marker({ 
map: map, 
position: point, 
title: 'Click to view details', 
icon: icon.icon, 
shadow: icon.shadow, 
formdateoftrip: "dateoftrip", 
formfindcategory: "findcategory",
formfindname: "findname",
formfinddescription: "finddescription",
formpasref: "pasref",
formfindimage: "findimage",
formadditionalcomments: "additionalcomments"
}); 
bounds.extend(point); 
map.fitBounds(bounds); 
} 
google.maps.event.addListener(marker, "click", function() {  
document.getElementById('dateoftrip').value = this.formdateoftrip;
document.getElementById('findcategory').value = this.formfindcategory; 
document.getElementById('findname').value = this.formfindname
});

Answer 1

只需添加以下新字段即可在标记中存储其他数据：

var marker = new google.maps.Marker(
{          
  map : map, 
  position : point,
  title : 'Click to view details',
  icon : icon.icon,
  shadow : icon.shadow,
  myVariable1 : "some data from xml",
  myVariable2 : "some other data"
});

然后，您只需为标记注册onClick事件并将其数据放入表单中。

google.maps.event.addListener(marker, "click", function()
{
  alert("Associated data: " + this.myVariable1 + ", " + myVariable2);
});

//编辑：

显然上面的代码只显示了如何从标记中检索数据 - 这只是一个例子。将JavaScript中的数据放入表单是一个两步过程。您要做的第一件事是通过“id”属性为每个字段填充唯一ID。你已经完成了。然后你要做的就是在onClick事件中放入以下代码（而不是上面示例中的alert（））：

document.getElementById('formdateoftrip').value = this.formdateoftrip;
// repeat it for other fields here

祝你好运;）

//另一个编辑：

我没注意到你把google.maps.event.addListener放错了地方。它只适用于一个标记的原因是你把它放在“for”循环之外，它创建了标记。它必须在“map.fitBounds（bounds）;”之后。但在“}”之前，所以将它移动一行。

第二个问题在于传递标记中的数据。如果要引用变量，则不能将它们放在引号中。您可以使用引号来编写字符串。

替换：

formdateoftrip: "dateoftrip", 
formfindcategory: "findcategory",
...

分为：

formdateoftrip: dateoftrip, 
formfindcategory: findcategory,
// fix the others below too

将mySQL数据加载到表单中

1 个答案: