2

データベースからマーカーを配置するのに少し問題があります。このガイドhttps://developers.google.com/maps/articles/phpsqlajax_v3に従いました。ページは読み込まれますが、マーカーはありません。xml ジェネレーターが機能しているかどうかも確認しましたが、はい、機能しています。誰かが私が間違っていることを手伝ってくれますか? これが私のインデックスファイルです。

     <?php include('connection_db.php');?>


     downloadUrl("xmlspitter.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;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    shadow: icon.shadow
    });
    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);
}

function doNothing() {}
</script>   


 </head>
    <body onload="initialize()">
    <div id="contain">
   <div id="map_canvas" style="width:500px; height:500px"></div>
   </div>
   </body>
  </html>

注：xmlspitter.php私のデータベースからの正しい出力があります。また、誰かがもっと良いチュートリアルを知っている場合は、ありがとうと教えてください。

//EDIT これは外部 js からのマップです

    function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(47.6145, -122.3418),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

そしてxmlspitter.phpもし興味を持った人がいたら

   <?php  
    include('connection_db.php');

   // Start XML file, create parent node

    $dom = new DOMDocument("1.0");
    $node = $dom->createElement("markers");
  $parnode = $dom->appendChild($node); 



   // Select all the rows in the markers table

  $query = "SELECT * FROM markers 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']);
 } 

 echo $dom->saveXML();

 ?>
4

1 に答える 1

3

あなたが示したことから、あなたのJavaスクリプトコードは実行されていません。すべてを初期化関数に配置する必要があります。

また、customIcons変数を初期化していないか、値を指定していません。使用しない場合は、取り外すことができます。その場合、デフォルトのマーカーを使用する必要があります。

ガイドから

カスタム アイコン マーカーのカスタム アイコンと影を指定できます。アイコンをタイプ文字列「レストラン」または「バー」に関連付ける連想配列を作成することから始めます。これにより、後で XML からマーカーを作成するときにアイコンを簡単に参照できます。

var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};

実は昨年も似たようなことをしました。私はphpを使用してデータベースからマーカーを入力しましたが、javascriptやxmlではありませんでした。

編集済み: ブログのリンクは無効になりました。

于 2012-12-19T04:41:23.637 に答える