mysql - Infobubble 仅显示通过 PHP/Mysql 添加的最后一个带有选项卡的标记的内容

Question

我一直在尝试让 Infobubbles 使用 map 上的 2 个选项卡，其中通过 ajax 调用填充了来自 Mysql 数据库的标记。

问题是每个信息气泡在选项卡中显示与最后添加的标记相同的内容。这是整个 js 脚本，非常感谢您的帮助。

      var script = '<script type="text/javascript" src="http://google-maps-' +
      'utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble';
  script += '.js"><' + '/script>';
  document.write(script);

var customIcons = { 
  free: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
    animation: google.maps.Animation.DROP,
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
  }, 
  paid: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
    animation: google.maps.Animation.DROP,
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
  } 
}; 

// End Custom Icons 

 var map, infoBubble; 

function initialize() { 
    var myOptions = { 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map'), 
        myOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) 
        { 
        var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 

        var marker = new google.maps.Marker({ 
          map: map, 
          position: pos, 
                      icon:'images/markers/you.png', 
                      animation: google.maps.Animation.DROP, 
          title: 'Your Location.' 
        }); 

    infoBubble = new InfoBubble({
      maxWidth: 300,
      borderRadius: 10,
      borderWidth: 1,
      borderColor: '#2c2c2c',
      shadowStyle: 1
    });


  var infoWindow = new google.maps.InfoWindow; 

  // Change this depending on the name of your PHP file 
  downloadUrl("phpsqlajax_genxml.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 citystate = markers[i].getAttribute("citystate"); 
        var phone = markers[i].getAttribute("phone"); 
        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 + "<br/>" + citystate + "<br/>" + phone;  //html inside InfoWindow 
        var description = "<b>" + name + "</b> <br/>" + address + "<br/>" + citystate + "<br/>" + phone;  //html inside InfoWindow
        var icon = customIcons[type] || {}; 
        var marker = new google.maps.Marker({ 
            map: map, 
            position: point, 
            icon: icon.icon, 
            shadow: icon.shadow,
            animation: google.maps.Animation.DROP
        }); 
        bindInfoWindow(marker, map, infoBubble, html, description); 
    } 
    infoBubble.addTab('Tab 1', html);
    infoBubble.addTab('Tab 2', description);

  }); 


        map.setCenter(pos); 
      }, function() { 
        handleNoGeolocation(true); 
      }); 
    } else { 
      // Browser doesn't support Geolocation 
      handleNoGeolocation(false); 
    } 
  } 


  function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
      var content = 'Error: The Geolocation service failed.'; 
    } else { 
      var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
      map: map, 
      position: new google.maps.LatLng(60, 105), 
      content: content 
    }; 

    var infoBubble = new google.maps.infoBubble(options); 
    map.setCenter(options.position); 
  } 

// Additional functions related to the DB Listing function 

function bindInfoWindow(marker, map, infoBubble, html) { 
  google.maps.event.addListener(marker, 'click', function() { 
    //infoBubble.setContent(html); 
    infoBubble.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() {} 

  function addTab() {
    var title = document.getElementById('tab-title').value;
    var content = document.getElementById('tab-content').value;

    if (title != '' && content != '') {
      infoBubble.addTab(title, content);
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

根据标记设置内容的代码被注释掉:

//infoBubble.setContent(html);

因此，始终显示最后创建的信息窗口的内容。

working example, including the tab content