Question

我一直在努力让Infobubbles在地图上的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

Answer 2

谷歌地图信息窗口中的Q问题点击下一个标记时谷歌地图信息窗口打开带有标签的信息窗口但是当再次单击下一个标记然后它用选项卡打开信息窗口但是prevoius标签没有关闭herte是代码

google.maps.event.addListener（marker，'click'，（function（marker，contentString）{ return function（）{

                          infoBubble.addTab('Tab 1', contentString);
                          infoBubble.addTab('Tab 2', contentString12);
                          infoBubble.setContent(contentString); 
                          infoBubble.close('Tab 1', contentString);
                          infoBubble.open(map,marker);

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

2 个答案: