如何解决不同脚本之间的不兼容问题

Question

我正在尝试使用不同的脚本来开发一个页面，比如谷歌放置自动完成，带有复选框的查询(https://developers.google.com/fusiontables/docs/samples/in)放大一个地方(http://www.geocodezip.com/v3_FusionTables_GViz_zoom2MarkerA.html)。

问题是，自动完成或复选框+缩放单独工作很好，但组合在一起时一切都错了！

我曾试图将代码错位并重新组装，但它不起作用，我不明白为什么。我完全是Javascript的初学者，所以我真的在测试和调整东西。

如果你有任何线索，非常感谢！

带复选框+缩放的代码：

// Checkboxes
layer = new google.maps.FusionTablesLayer();
    filterMap(layer, FT_TableID, map);

    google.maps.event.addDomListener(document.getElementById('0'),
        'click', function() {
          filterMap(layer, FT_TableID, map);
    });   
    google.maps.event.addDomListener(document.getElementById('1'),
        'click', function() {
          filterMap(layer, FT_TableID, map);
    });
    google.maps.event.addDomListener(document.getElementById('2'),
        'click', function() {
          filterMap(layer, FT_TableID, map);
    });
    google.maps.event.addDomListener(document.getElementById('3'),
        'click', function() {
          filterMap(layer, FT_TableID, map);
    });
        google.maps.event.addDomListener(document.getElementById('4'),
    'click', function() {
      filterMap(layer, FT_TableID, map);
});
  }
  // Filter the map based on checkbox selection.
  function filterMap(layer, FT_TableID, map) {
    var where = generateWhere();
    if (where) {
      if (!layer.getMap()) {
        layer.setMap(map);
      }
      layer.setOptions({
        query: {
          select: 'Latitude',
          from: FT_TableID,
          where: where
        }
      });
    } else {
      layer.setMap(null);
    }
  }
  // Generate a where clause from the checkboxes. If no boxes
  // are checked, return an empty string.
  function generateWhere() {
    var filter = [];
    var stores = document.getElementsByName('note');
    for (var i = 0, note; note = stores[i]; i++) {
      if (note.checked) {
        var noteName = note.value.replace(/'/g, '\'');
        filter.push("'" + noteName + "'");
      }
    }
    var where = '';
    if (filter.length) {
      where = "'coeurs' IN (" + filter.join(',') + ')';
    }
    return where;
  }
  google.maps.event.addDomListener(window, 'load', initialize);

///// end of checkboxes part
//////// zoom

            function changeQuery(term) {
              layer.setOptions({query:{select:'Latitude', /* was 'Latitude,Longitude', used to work... */
                                       from:FT_TableID,
                                       where:"'Nom' contains ignoring case '"+term + "'"
                                     //à la place de :   where:"Nom contains "+term
                                       }
             });
            // alert("query="+term);


            // zoom and center map on query results
              //set the query using the parameter

              var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM "+FT_TableID+" WHERE 'Nom' contains '"+term+"'");
            // does _not_ work  var queryText = encodeURIComponent("SELECT 'Latitude' FROM "+FT_TableID+" WHERE District = "+term);
              var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);


              //set the callback function
              query.send(zoomTo);

            }

            function zoomTo(response) {
            if (!response) {
              alert('no response');
              return;
            }
            if (response.isError()) {
              alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
              return;
            } 
              FTresponse = response;
              //for more information on the response object, see the documentation
              //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
              numRows = response.getDataTable().getNumberOfRows();
              numCols = response.getDataTable().getNumberOfColumns();

              var bounds2 = new google.maps.LatLngBounds();
              for(i = 0; i < numRows; i++) {
                  var point = new google.maps.LatLng(
                      parseFloat(response.getDataTable().getValue(i, 0)),
                      parseFloat(response.getDataTable().getValue(i, 1)));
                  bounds2.extend(point);
              }
              // zoom to the bounds
              map.fitBounds(bounds2);
             map.setZoom(18);
            }

用于自动完成的代码：

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map); 
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}

// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);  // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(O, 0),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
var address = '';
if (place.address_components) {
address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }

infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
    });
}

// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
      });
    }

    setupClickListener('changetype-all', []);
    setupClickListener('changetype-establishment', ['establishment']);
    setupClickListener('changetype-geocode', ['geocode']);

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

initialize:有两个调用

google.maps.event.addDomListener(window, 'load', initialize);

移除其中一个。