1

データベースに保存されている xml ファイルから取得したマーカーを使用してマップを作成しています。マップの下に、各マーカーから同じ情報を取得し、リストとして表示しています。私がしようとしているのは<a href="">、各リストの横にある対応するマーカーと情報ウィンドウを開くタイプ リンクを作成することです。これが私のページです。私の言いたいことをよりよく説明しているかもしれません: http://poultry.ie/plugin/page/breeders

これが私のコードです：

 <script type="text/javascript">
    //<![CDATA[

var redpin = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_red.png',
    new google.maps.Size(20,32),
    new google.maps.Point(0,0),
    new google.maps.Point(0,32)
);
var redpinshadow = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_shadow.png',
    new google.maps.Size(37,32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32)
);


   function load() {
       var gmarkers = [];
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(53.5076512854544, -7.701416015625),
        zoom: 7,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
       downloadUrl("http://poultry.ie/plugins/CustomPages/pages/phpsqlajax_genxml3.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 phone = markers[i].getAttribute("phone");
          var breeds = markers[i].getAttribute("breeds");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b><br />" + address + "<br/>" + phone + "<br/>" + breeds;
      var marker = new google.maps.Marker({
        map: map,
        shadow: redpinshadow,
        icon: redpin,
        position: point
      });

          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>

リストを動的に表示する php (この 1 つの郡の場合):

//Armagh
 $data = mysql_query("SELECT * FROM markers WHERE address='Armagh'")
 or die(mysql_error());
 while($info = mysql_fetch_array( $data )) 
 { 
 Print '<div class="county all armagh">'; 
 Print "<h4>".$info['name'] . "</h4> "; 
 Print "<em>".$info['address'] . "</em><br /> "; 
 Print "".$info['phone'] . "<br /> "; 
 Print '<a href="javascript:myclick(' . $info['id'] . ')">See on Map</a><br />';
 Print "<em>Breeds:</em> ".$info['breeds'] . "<hr/></div>";

 }

はこれ<a href="javascript:myclick(を作成する以前の試みによるもので、現時点では実際には機能していません。

JavaScript に関する私の知識は控えめに言ってもかなり限られているため、コードに多くの例を適用しようとしましたが成功しませんでした。上記のコードは、多くの例からまとめたものであるため、最もクリーンではない可能性もあります。

4

1 に答える 1

1

xml ファイルからマーカーをロードし、クリック可能なサイドバーを持つ例(Mike Williams の v2 チュートリアルから移植) を次に示します。

于 2012-08-08T00:37:51.360 に答える