php - 谷歌教程的标记问题 "Using PHP/MySQL with Google Maps"

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 中提取并添加自定义图标图像外，我几乎复制并粘贴了 google 示例中的代码。

关于如何让这些标记出现的任何想法？ map 显示了我选择的中心和缩放比例，但没有显示标记。

Answer 1

我想我可能会看到一些问题(我会在一分钟内解决)，但首先我会尝试提供一些更通用的调试建议 -

测试依赖于服务器端代码的某人的代码是非常棘手的，即使它是您自己的。在这种情况下，我要做的第一件事是创建一个通用的 xml 文件进行解析，并将其包含在页面中。然后，如果出现问题，希望您能判断错误是否出现在代码的 map 渲染部分。如果有效，则您可以将错误缩小到服务器上或您用于从服务器获取它的代码中。

接下来，我会尝试将 xml 文件按原样放在服务器上，并查看客户端文件下载是否正常。我怀疑这是您至少会注意到一个错误的地方。现在，您的 map 渲染取决于两个独立的步骤:初始化 map 的“加载”函数；以及对“downloadURL”函数的调用，您依赖它来获取标记数据。

问题在于您如何构建调用。您在“load”中创建的“map”变量是“load”本身的本地变量；你不能在它之外访问它。有两种方法可以解决这个特定问题:您可以将 map 变成一个全局变量，或者在“load”中添加所有操作 map 的代码。如果你想做前者，你只需这样做:

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

这将“map”添加到全局范围，允许它在“load”之外使用。

但是，按原样执行此操作仍然存在问题:这不能保证在“downloadURL”开始操作 map 时“load”已经初始化了 map 。在“加载”首先有机会创建 map 之前，它有可能会尝试将“标记”添加到“ map ”。幸运的是，这可以通过将“downloadURL”调用放在“load”中来解决，如下所示:

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

这确保标记只会在 map 创建后添加到 map 中，并且它们首先可以访问 map 。