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（对于这个县）：

//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

这是一个示例（来自 Mike Williams 的 v2 教程），它从 xml 文件加载标记并具有可点击的侧边栏

于 2012-08-08T00:37:51.360 回答