2

非営利団体の FAFSA に記入する場所のデータベースを作成し、それらをカスタム マーカー イメージを使用して Google マップに配置しようとしていますが、マーカーが表示されないようです。

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 の例からコードをほとんどコピーして貼り付けました。

これらのマーカーを表示させる方法についてのアイデアはありますか? マップには、選択した中心とズームが表示されますが、マーカーは表示されません。

4

2 に答える 2

0

いくつかの問題が発生する可能性があると思いますが（すぐに問題が発生します）、最初に、より一般的なデバッグのアドバイスを提供しようと思います-

サーバー側のコードに依存する誰かのコードをテストすることは、たとえそれがあなた自身のものであっても、かなりトリッキーです。このような場合に最初に行うことは、解析する汎用xmlファイルを作成し、それをページに含めることです。次に、問題が発生した場合に、コードのマップレンダリング部分でバグが発生しているかどうかを確認できれば幸いです。それが機能する場合は、バグをサーバー上にあるか、サーバーから取得するために使用しているコード内にあるかを絞り込むことができます。

次に、xmlファイルをそのままサーバーに配置して、クライアント側のファイルのダウンロードが機能しているかどうかを確認します。これは、少なくとも1つのエラーに気付く場所だと思います。現在、マップのレンダリングは2つの別々のステップに依存しています。マップを初期化する「ロード」関数。マーカーデータを取得するために依存している「downloadURL」関数の呼び出し。

問題は、呼び出しをどのように構成したかです。「load」で作成した「map」変数は、「load」自体に対してローカルです。それ以外ではアクセスできません。この特定の問題を修正するには、2つの方法があります。マップをグローバル変数に変換する方法と、「ロード」内でマップを操作するすべてのコードを追加する方法です。前者を実行したい場合は、次のようにします。

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」がマップを初期化したことを保証するものではありません。「load」が最初にマップを作成する前に、「map」に「markers」を追加しようとする可能性があります。幸い、これは次のように「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 に答える
0
  1. JavaScript コンソールでエラーを確認します
  2. xml を確認します。ブラウザでそれを指定して、それが有効であると判断されるかどうかを確認してください。

  3. マーカー xml を解析するマップでデバッガーを使用 (または単にアラートを追加) し、この for ループによって処理されているマーカー変数の長さが正しいことを確認します。

    for (変数 i = 0; i < マーカーの長さ; i++) {

上記のいずれかが問題を指摘しているはずです。そうでない場合は、ライブマップへのリンクを投稿してください。誰かがそれを理解できます.

于 2012-11-28T22:39:38.337 に答える