5
我已經查看了我可以在這裏找到的每個答案，並且無法解決此問題。 我很確定我沒有錯過任何明顯的東西。responseText工作，但responseXML始終爲空
我想加載基於lat long的地圖標記。問題是當我嘗試返回AJAX響應作爲responseXML它始終爲空，如果我使用responseText它工作正常，但顯然下一步不起作用。
這是生成XML的PHP：
<?php
header('Content-type: text/xml');
?>
<?xml version="1.0" encoding="ISO-8859-1"?>
<properties>
<![CDATA[
<?php
if ($body != null):
foreach ($body as $property): ?>
<property>
<lat><?php echo $property -> lat; ?></lat>
<long><?php echo $property -> long; ?></long>
<name><?php echo $property -> property_name; ?></name>
</property>
<?php endforeach;
endif; ?>
]]>
</properties>
我可以提琴手看到，該請求是由OK
GET /letsgo/index.php/hotmaps/get_properties_ajax/22.270888501350186/22.288560098193066/114.13720860290528/114.19827713775635 HTTP/1.1
Entity Content-type: text/xml
雖然當我在提琴手查看此在XML視圖它出現是空的，
這裏是原始響應
HTTP/1.1 200 OK
Date: Tue, 15 Jan 2013 11:04:27 GMT
Server: Apache/2.4.2 (Win32) PHP/5.4.4
X-Powered-By: PHP/5.4.4
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Length: 310
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<properties>
<![CDATA[
<property>
<lat>22.2776</lat>
<long>114.173</long>
<name>Kaxo Tower test</name>
</property>
<property>
<lat>22.2803</lat>
<long>114.16</long>
<name>Kuno Tower</name>
</property>
]]>
</properties>
這裏是叫每個地圖移動
// make the ajax request
function loadXMLDoc(downUrl){
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//var propertiesXml = xmlhttp.responseText; // WORKS FINE!!
var propertiesXml = xmlhttp.responseXML; // ALWAYS null
//alert(propertiesXml);
var propertiesRows = propertiesXml.getElementsByTagName("property");
for (var i = 0; i < propertiesRows.length; i++) {
var propertiesRow = propertiesRows[i];
var xmlLat = propertiesRow.getElementsByTagName("lat")[0];
var xmlLong = propertiesRow.getElementsByTagName("long")[0];
var propertyLatLong = new google.maps.LatLng(parseFloat(xmlLat.firstChild.data),parseFloat(xmlLat.firstChild.data));
// create each marker
createMarker(propertyLatLong);
}
}
}
xmlhttp.open("GET", downUrl, false); // false or true? makes no difference
xmlhttp.setRequestHeader("Content-type", "text/xml");
xmlhttp.send();
}
時間創建標記功能，這是錯誤我得到了與空餵養的getElementsByTagName，鉻控制檯說
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
這是在我的本地Apache上運行
有什麼建議嗎？
/**更新 - 工作代碼**/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE&sensor=false">
</script>
<script type="text/javascript">
// initialise map
function initialize() {
// set starting latlong
var myLatlng = new google.maps.LatLng(22.2776, 114.173);
// set initial map options
var mapOptions = {
center: myLatlng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// listen for changes in map bounds - after map has stopped moving!!
google.maps.event.addListener(map,'idle', function() {
loadByBounds(map);
});
}
// if the bounds have changed
function loadByBounds(map) {
var bounds = map.getBounds();
var swPoint = bounds.getSouthWest();
var nePoint = bounds.getNorthEast();
// specific co ordinates
var swLat = swPoint.lat();
var swLng = swPoint.lng();
var neLat = nePoint.lat();
var neLng = nePoint.lng();
var downUrl = "<?php echo site_url('hotmaps/get_properties_ajax'); ?>/"+swLat+"/"+neLat+"/"+swLng+"/"+neLng;
// load the
loadXMLDoc(downUrl, map);
// clear icons outside of bounding box
//....
}
// make the ajax request
function loadXMLDoc(downUrl, map){
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var propertiesXml = xmlhttp.responseText; // WORKS FINE!!
// remove whitespaces from start and end (.trim() doesnt work)
propertiesXml = propertiesXml.replace(/^\s+|\s+$/g,'');
// manually parse to XML DOM object
var parser = new DOMParser();
var xmlDoc;
try {
xmlDoc = parser.parseFromString (propertiesXml, "text/xml");
} catch (e) {
alert ("XML parsing error.");
return false;
};
//console.log(xmlDoc);
// get each property
var propertiesRows = xmlDoc.getElementsByTagName("property");
//alert(console.log(propertiesRows));
for (var i = 0; i < propertiesRows.length; i++) {
var propertiesRow = propertiesRows[i];
var xmlLat = propertiesRow.getElementsByTagName("lat")[0];
var xmlLong = propertiesRow.getElementsByTagName("long")[0];
var propertyLatLong = new google.maps.LatLng(parseFloat(xmlLat.firstChild.data),parseFloat(xmlLong.firstChild.data));
// create each marker
createMarker(propertyLatLong, map);
}
}
}
xmlhttp.open("GET", downUrl, false);
xmlhttp.setRequestHeader("Content-type", "text/xml");
xmlhttp.send();
}
// create new markers
function createMarker(propertyLatLong, map){
var dynamicMarker = new google.maps.Marker({
map:map,
draggable:false,
position: propertyLatLong
});
debugger;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
我已經走了下來你的建議，似乎已經奏效的路線，雖然現在我得到一個未定義的VAR誤差，這可能是一個單獨的問題，你會介意看一下嗎？謝謝。 – dijkstra8x
你能更具體嗎？哪個var在哪一行上是未定義的？ – povilasp
沒有定義全屏：104這將是.. } } xmlhttp.open（「GET」，downUrl，false）; – dijkstra8x