Question

我有一张地图，其中填充了从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的了解至少可以说是非常有限。我上面的代码也可能不是最干净的，因为我从很多例子中把它放在一起。

Answer 1

这是an example（从Mike Williams的v2教程移植而来），它从xml文件中加载标记并具有可点击的侧边栏

Google Maps API - 用于映射标记和打开信息窗口的外部链接

1 个答案: