谷歌教程「使用PHP/MySQL與谷歌地圖」的標記問題

Question

我試圖做一個數據庫的位置來填補我的非盈利FAFSA，並把它們放在谷歌地圖與自定義標記圖像，但似乎不能顯示標記。

這裏是創建XML的PHP​​：

<?php 
require("mapdbinfo.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 ("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("Can\'t use db : " . mysql_error());} 

$query = "SELECT * FROM locations 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 each 
while ($row = mysql_fetch_assoc($result)){ 
    // Add to XML document node 
    $node = $dom->createElement("marker"); 
    $newnode = $parnode->appendChild($node); 

    $newnode->setAttribute("name",$row['name']); 
    $newnode->setAttribute("address", $row['address']); 
    $newnode->setAttribute("lat", $row['lat']); 
    $newnode->setAttribute("lng", $row['lng']); 
    $newnode->setAttribute("type", $row['type']); 
    $newnode->setAttribute("date", $row['date']); 
    $newnode->setAttribute("cord", $row['cord']); 
    $newnode->setAttribute("cord_info", $row['cord_info']); 
} 

echo $dom->saveXML(); 
?> 

這裏是Java腳本：

function load() { 
var location_icon = new google.maps.MarkerImage('images/FAFSA_Logo_icon.png'); 
var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(35.105305, -106.628014), 
    zoom: 9, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 
    } 

downloadUrl("mapmysql.php", function(data) { 
var xml = data.responseXML; 
var markers = xml.documentElement.getElementsByTagName("marker"); 
for (var i = 0; i < markers.length; i++) { 
var name = markers[i].getAttribute("name"); 
var address = markers[i].getAttribute("address"); 
var type = markers[i].getAttribute("type"); 
var point = new google.maps.LatLng(
    parseFloat(markers[i].getAttribute("lat")), 
    parseFloat(markers[i].getAttribute("lng"))); 
var html = "<b>" + name + "</b> <br/>" + address + "<b> Cordinator </b>" + cord + cord_info; 
var icon = location_icon; 
var marker = new google.maps.Marker({ 
    map: map, 
    position: point, 
    icon: icon  
}); 
bindInfoWindow(marker, map, infoWindow, html); 
} 
}); 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

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); 
}  

我想不通爲什麼他們標記沒有顯示出來。該文件位於該圖像文件夾中，但是，對於我來說，有很多地方可能會錯誤地使用我當前的知識進行故障排除。我幾乎複製並粘貼了谷歌示例中的代碼，除了添加一些字段以從XML中拉出並添加了自定義圖標圖像。

關於如何讓這些標記出現的任何想法？地圖顯示中心和縮放我選擇，但不是標記。

Answer 1

我想我可以看到幾個問題（我會得到他們在一分鐘內），但首先我會嘗試提供一些常規調試建議 -

測試別人的代碼，這依賴於一個服務器端代碼是非常棘手的，即使它是你自己的。在這種情況下，我會做的第一件事是創建一個通用的xml文件來解析，並將其包含在頁面中。然後，如果出現錯誤，希望您可以知道錯誤是否發生在代碼的地圖渲染部分。如果它能夠工作，那麼你可以將bug縮小到服務器上，或者用來從服務器獲取它的代碼。

接下來，我會嘗試將xml文件按原樣放到服務器上，並查看客戶端文件下載是否正常。我懷疑這是你會發現至少有一個錯誤的地方。現在，你的地圖渲染依賴於兩個獨立的步驟：初始化地圖的「加載」函數;並調用「downloadURL」函數，您將依賴該函數獲取標記數據。

問題在於您如何構建調用。在「load」中創建的「map」變量對於「load」本身是本地的;你不能在它之外訪問它。有兩種方法可以解決這個特殊問題：您可以將地圖變成全局變量，或添加所有在「加載」中操作地圖的代碼。如果你希望做的是前者，你只是這樣做：

var map; 
function load() { 
    var location_icon = new google.maps.MarkerImage('images/FAFSA_Logo_icon.png'); 
    map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(35.105305, -106.628014), 
    zoom: 9, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 
} 

這增加了「地圖」在全球範圍內，允許它的「負荷」之外使用。

但是，仍然存在這樣做的問題：這並不能保證「load」已經在「downloadURL」開始操作時初始化映射。在「load」有機會創建地圖之前，它有可能嘗試將「標記」添加到「地圖」中。幸運的是，這可以通過將內「負荷」的「downloadURL」電話來解決，就像這樣：

function load() { 
    var location_icon = new google.maps.MarkerImage('images/FAFSA_Logo_icon.png'); 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(35.105305, -106.628014), 
    zoom: 9, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    downloadUrl("mapmysql.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for(var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var point = new google.maps.LatLng(
     parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + name + "</b> <br/>" + address + "<b> Cordinator </b>" + cord + cord_info; 
     var icon = location_icon; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    }); 
} 

這確保了地圖創建後的標記將只被添加到地圖，並認爲他們是首先可以訪問地圖。

Answer 2

1. 檢查錯誤
2. JavaScript控制檯檢查XML。將瀏覽器指向它，看它是否認爲它是有效的。

3. 使用調試器（或只需添加一個警告）在你的地圖，它解析標記的XML，檢查正在由該for循環處理的標誌變量的長度是正確的：

   爲（VAR I = 0;我< markers.length;我++）{

一個以上應指向的問題。如果沒有，發佈一個鏈接到你的活地圖，有人可以弄明白。