0
GoogleマップAPIを使用してマップを作成しています。 JavaScriptとknockout.jsがコーディングに使用されます。 私はasynchonously非同期追加することにより、GoogleマップAPIスクリプトをロードしようとするたび：キャッチされないにReferenceError：バインディング「の値を処理することができません：私は、このエラーenter image description hereGoogleマップからの非同期リクエストapi - バインディングエラーを処理できません
エラーが言うに取得
<script src async ="https://maps.googleapis.com/maps/api/js?v3.exp"></script>
OR
<script async src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=googleSuccess" onerror="googleError()">
</script>
機能（）{リターンをpointFilter} " メッセージ：pointFilterは定義されていません しかし、私はpointFilter observableを定義しました。
リクエストから非同期を削除すると、ページは正常に実行されます。 このエラーを取り除くにはどうすればよいですか、これを行う方法が他にありますか。 これらは私のファイルindex.htmlとmain.jsです
単語の制限のために完全なコードを含めることはできません。
index.htmlを
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <!
[endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>New Delhi</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS links-->
<link rel="stylesheet" href="css/main.css">
<!-- JS links -->
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-
1.11.2.min.js">\x3C/script>')
</script>
<!-- google maps api call-->
<script src async ="https://maps.googleapis.com/maps/api/js?v3.exp">
</script>
<script src="js/vendor/knockout-3.2.0.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!--the map element will be used here and fill 100% of the screen-->
<div id="map"></div>
<!--this holds our entire listbox and search it will be added to map
controls-->
<div id="searchui">
<!--is the checkbox options above the filter/search box-->
<div id="searchOptions" >
<label class="optionCheck"><input type="checkbox"
id="refitFilterCheck" data-bind="checked: refitFilterCheck"><span>refit
map on filter?</span></label>
<label class="optionCheck"><input type="checkbox"
id="refitResizeCheck" data-bind="checked: refitResizeCheck"><span>refit
map on window resize?</span></label>
<label class="optionCheck"><input type="checkbox"
id="searchCategoryCheck" data-bind="checked: searchCategoryCheck">
<span>search name only?</span></label>
</div>
<!--this is the filter/search box-->
<input id="searchbox" type="search" placeholder="Search Here" data-
bind="value: pointFilter, valueUpdate: 'keyup'" autocomplete="off">
<!--this is the points list-->
<ul id="pointList" data-bind="visible: listVisible, template: {name:
'pointsTemplate',foreach: shownList}">
</ul>
<!--this is the list controls such as next page and collaps-->
<div id="listControls">
<div id="pageControls" data-bind="display: listVisible">
<div id="prevPage" data-bind="click:
changePage.bind($data,-1)">
<strong data-bind="text: prevPageText"></strong>
</div>
<div id="pageNumText" data-bind="html: pageText"></div>
<div id="nextPage" data-bind="click:
changePage.bind($data,1)">
<strong data-bind="text: nextPageText"></strong>
</div>
</div>
<div id="listRollup" data-bind="click: toggleList">
<img id="rollupImg" data-bind="attr:{src: rollupIconPath,
alt: rollupText}" />
</div>
</div>
</div>
<!--this is a knockout template used for point list items-->
<script type="text/html" id="pointsTemplate">
<li data-bind="event: {mouseover: $parent.mouseHere, mouseleave:
$parent.mouseGone}, click:$parent.selectPoint, css:
$parent.getStyle($data)">
<strong data-bind="text: name"></strong>
</li>
</script>
</body>
</html>
main.js
var TheMap = function(){
this.Zoom = 10;
this.mapOptions = {
zoom: this.Zoom,
panControl: false,
disableDefaultUI: true,
center: new google.maps.LatLng(28.6562,77.2410),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map =
new google.maps.Map(document.getElementById('map'), this.mapOptions);
};
var viewModel = function(){
/* scope alias */
var self = this;
/* clear session storage any time we load */
sessionStorage.clear();
/* how many items to show in filtered list max? */
/* sets based on window height to always fit a clean amount (min 1) */
self.maxListNum =
ko.observable(Math.max(1,Math.ceil(($(window).height() -150)/30)));
//is the list visible right now? 1 = on, 0 = false;
self.listVisible = ko.observable(1);
/* which point is the first one on our list page right now?
* actual page is calculated from this. Storing point instead
* of page so that point can remain consistent when list resizes
*/
self.listPoint = ko.observable(1);
/* make sure the google map api loaded before we do any work */
if (typeof google !== 'object' || typeof google.maps !== 'object'){
console.log("error loading google maps api");
$('#searchbox').val("Error Loading Google Maps Api");
$('#searchbox').css({'background-color' : 'rgba(255,0,0,0.3)'});
//return early since we have no maps. No point in doing much else.
return;
}
pointFilter宣言：
self.pointFilter = ko.observable('');
/* calculated array containing just the filtered results from points()*/
self.shownPoints = ko.computed(function() {
return ko.utils.arrayFilter(self.points(), function(point) {
return (self.pointFilter() === '*' ||
point.name.toLowerCase().indexOf(self.pointFilter().
toLowerCase()) !== -1);
});
}, self);
あなたの質問にエラーメッセージを追加して、他のユーザーがGoogleの検索で見つけられるようにしてください。あなたが得ているエラーは、 "pointFilter"が定義されていないということです。あなたのビューモデルには含まれていません。コードの関連部分を更新してください。 –
私は自分の質問を編集し、 "pointFilter"を宣言した部分を追加しました。 –
「value：function（）{return pointFilter}」という綴りがありますか？あなたが投稿したページの部分には、 "value：pointFilter"しかありません... –