2

我正在尝试建立一个位置数据库来为我的非营利组织填写 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 中提取的字段并添加了自定义图标图像。

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

4

2 回答 2

0
  1. 检查 javascript 控制台是否有错误
  2. 检查xml。将您的浏览器指向它，看看它是否认为它是有效的。

  3. 在解析标记 xml 的地图中使用调试器（或仅添加警报），检查此 for 循环正在处理的标记变量的长度是否正确：

    for (var i = 0; i < marker.length; i++) {

以上其中一项应指出问题所在。如果没有，请发布指向您的实时地图的链接，有人可以弄清楚。

于 2012-11-28T22:39:38.337 回答
0

我想我可能会看到一些问题（我会在一分钟内解决它们），但首先我将尝试提供一些更一般的调试建议 -

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

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

问题在于您如何组织调用。您在“load”中创建的“map”变量是“load”本身的本地变量；你不能在它之外访问它。有两种方法可以解决此特定问题：您可以将 map 转换为全局变量，或者在“加载”中添加所有操作 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;
}

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

但是，按原样执行此操作仍然存在问题：这不能保证在“downloadURL”开始操作地图时“load”已经初始化了地图。在“加载”有机会首先创建地图之前，它有可能尝试将“标记”添加到“地图”。幸运的是，这可以通过将“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);
    }
  });
}

这可确保仅在创建地图后将标记添加到地图中，并且它们首先可以访问地图。

于 2012-11-28T22:43:38.657 回答