3

我有一个使用markerclusterer的数据库驱动的谷歌地图v3，一切正常，但我想显示额外的数据，而不是仅仅能够显示来自数据库的一个直接结果（如ID或名称等）。在使用markerclusterer 到具有超链接的级别之前，我已经让它工作了，并且希望获得类似的结果。

我目前拥有的代码是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script src="JS/markerclusterer.js" type="text/javascript"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?   sensor=false"></script>

 </head>
 <body onload="load()" onunload="GUnload()">
 <div id="body">

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

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'
  }
};

function load() {
  var cluster = [];
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(53.4788, -3.9551),
    zoom: 6,
    mapTypeId: 'roadmap'
  });
var infowindow = new google.maps.InfoWindow();
var min = .999999;
var max = 1.000001;

  // Change this depending on the name of your PHP file
  downloadUrl("gmapxml.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("id");
      var type = markers[i].getAttribute("town");



      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("longitude")));
      var html = "<a href = 'profile.php?id="+address+"'>Visit "+ name +" </a></br><b>"+type;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                          infowindow.setContent(markers[i].getAttribute("id"));
                        infowindow.open(map, marker);
                    }
                })(marker, i));
      cluster.push(marker);
    }
    var mc = new MarkerClusterer(map,cluster);
  });
}

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>


    <div id="map" style="width: 800px; height: 600px"></div>
</div>

</div>
</body></html>

任何帮助将非常感激。

4

0 回答 0