我正在使用 JQuery UI 自动完成来填充地址搜索框，其中包含来自 Google 的地理编码服务的建议地址，如下所示：
$(function () {
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source: function (request, response) {
geocoder.geocode({ 'address': request.term }, function (results, status) {
response($.map(results, function (item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
};
}));
});
},
//This bit is executed upon selection of an address
select: function (event, ui) {
$("#latitude").val(ui.item.latitude);
$("#longitude").val(ui.item.longitude);
}
});
});
第一次加载页面时，自动完成功能不起作用，并且在 JavaScript 控制台中出现此错误：
警告：您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。
我已经检查过了，我肯定只调用了一次 API（它不包含在任何其他包含的脚本中）
奇怪的是，如果我在上述代码的第一行放置一个 Firebug 断点，我不会得到错误，并且自动完成工作正常。
有什么想法吗？
更新：这是页面主要代码的完整版本：
<script type="text/javascript"> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); document.createElement('banner'); document.createElement('menu'); document.createElement('hgroup'); document.createElement('figure'); document.createElement('figcaption'); document.createElement('details'); document.createElement('details');</script>
<!-- IE 6/7/8/9 Fix Script Ends Here-->
<link href="/css/mobile-normalize.css" rel="stylesheet">
<link href="/css/mobile-styles.css" rel="stylesheet">
<link href="/css/mobile-tradegothic-condeighteen.css" rel="stylesheet" type="text/css">
<link href="/css/mobile-css.css" rel="stylesheet" type="text/css">
<link href="/css/mobile-responsive.css" rel="stylesheet" type="text/css">
<script src="/scripts/mobile/retina.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/mobile/jquery.mobile-menu.js" type="text/javascript"></script>
<script src="/scripts/mobile/main.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
</head>
<body>
<section>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>-->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="/scripts/purl.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3Qs6Lp_YmhsC85fMfjHYaT5D4X_iwXZA&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var suppliedAddress = $.url().param("address");
if (suppliedAddress && (suppliedAddress != "")) {
$("#address").val($.url().param("address"));
}
var selectedClasses = $.url().param("classes");
if (selectedClasses != null) {
var arrSelectedClasses = selectedClasses.split(',');
for (i = 1; i < 15; i++) {
var chk = $("#filter_" + i);
if (chk != null) {
if ($.inArray(chk.val(), arrSelectedClasses) > -1) {
chk.attr('checked', 'checked');
} else {
chk.removeAttr('checked');
}
}
}
}
var geocoder = new google.maps.Geocoder();
$(function () {
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source: function (request, response) {
geocoder.geocode({ 'address': request.term }, function (results, status) {
response($.map(results, function (item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
};
}));
});
},
//This bit is executed upon selection of an address
select: function (event, ui) {
$("#latitude").val(ui.item.latitude);
$("#longitude").val(ui.item.longitude);
}
});
});
$("form").submit(function () {
var filter = [];
for (i = 1; i < 15; i++) {
var chk = $("#filter_" + i);
if (chk != null && chk.is(':checked')) {
filter.push(chk.val());
}
}
$("#selectedClasses").val(filter);
});
});
</script>
<form method="post" action="/global/en/find-a-class-list/" id="classList">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUENTM4MQ9kFgJmD2QWAmYPZBYCZg9kFgJmD2QWAgIDD2QWAgIBD2QWAmYPZBYCAgEQZGQWAgIDDxYCHgRUZXh0BSFQbGVhc2UgZW50ZXIgYSBsb2NhdGlvbiB0byBzZWFyY2hkZFENvCYrrddI6iYEHYyK3WKiJInatX9zdzE8+DJIH4IF" />
</div>
<div class="search_form2">
<div class="search_field2">
<input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$MainContent$ClassLocatorList_1$address" type="text" id="address" class="input12" />
<span>
<input name="submit" type="submit" value="" class="retina-sprite" /></span>
</div>
<div class="filter_box">
<input name="filter" type="button" value="Filter" class="filter" onclick="$('#filterpanel, #addressSearch, #clubList').toggle();" />
</div>
<input id="latitude" type="hidden" name="lat" />
<input id="longitude" type="hidden" name="lon" />
</div>
Please enter a location to search
</form>
</section>
</body>
</html>