谷歌地图,如何打开&关闭多个信息框

时间:2014-07-31 15:25:12

标签: javascript google-maps google-maps-api-3 google-maps-markers

以下代码主要取自Google教程,并将infowindows更改为信息框,就像这样。

  1. 负载&正确打开所有信息框。

  2. 点击关闭图标时关闭信息框。

  3. 单击标记时不会打开任何信息框,除了添加到地图的最后一个标记(如果有帮助,这是数组中的最后一个)

  4. 我已经尝试了几种选择但是没有运气让信息框再次打开,除了最后添加的标记,请帮帮我。

    function load() {
      var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: 'roadmap',
        scrollwheel: false
      });
      google.maps.event.addListener(map, "click", function() { ib.close() });
    
      var ib = new InfoBox();
    
      var bounds = new google.maps.LatLngBounds();
    
      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml2.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 point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
    
          var marker = new google.maps.Marker({
            map: map,
            position: point
          });
    
          bounds.extend(marker.position);
    
          var boxText = document.createElement("div");
          boxText.innerHTML = "<b>" + name + "</b> <br/><div id='station_data'><h2>Station Down</h2></div>";;
    
          var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              width: "280px"
             }
            ,closeBoxMargin: "-10px -10px 0px 0px"
            ,closeBoxURL: "close_icon.png"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
          };
    
            var ib = new InfoBox(myOptions);
            ib.open(map, marker);
            google.maps.event.addListener(marker, 'click', function() {
                ib.open(map, marker);
            });
    
        }
    
           map.fitBounds(bounds);
    
    
    
      });
    }
    
    
    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() {}
    
    //]]>
    

0 个答案:

没有答案