Google Maps APIインテルXDKウェイポイント

Question

学校のプロジェクトでは、インテルXDK、jQuery Mobile、APIを使用してアプリを作成する必要があります。私はルートを作ってgoogle-maps-map（あなたの旅行を見るtravelappのような）でこのルートを表示できるアプリを作りたかったのです。

私はインテルXDK（HTML5 + CordovaとApp Designer）を使用し、Google Maps Javascript APIからAPIキーを取得しました。

今はGoogle Maps APIを使用していて、AからBまでのルートを表示しています。次のコード（これは私のスクリプトにあります）では、私のルートにウェイポイントを追加しようとしました。私のHTMLコードでは、ユーザーのための3つのテキスト入力（スタート、経由（=ウェイポイント）、終了）、マップ、およびルートを表示するボタンがあります。私は多くのサンプルコードを見てきましたが、私のコードはうまくいかず、なぜか分かりません。エラーはありませんが、showボタンを押すと何も起こりません。私は間違って何をしたのですか？

誰でも助けてくれてありがとうことを願っています。

var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 

function initMap() { 
    var latlng = new google.maps.LatLng(41.850033, -87.6500523); 
    // set direction render options 
    //var rendererOptions = { draggable: true }; 
    directionsDisplay = new google.maps.DirectionsRenderer({map: map}); 
    var myOptions = { 
     zoom: 14, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false 
    }; 
    // add the map to the map placeholder 
    var map = new google.maps.Map(document.getElementById("gmap"),myOptions); 
    directionsDisplay.setMap(map); 
    calcRoute(); 
} 

function calcRoute() { 
    var start = $('#start-input').val(); 
    var via = $('#via-input').val(); 
    var end = $('#end-input').val(); 
    var waypts = []; 

    waypts.push({ 
     location: via, 
     stopover: true 
    }); 

    var request = { 
     origin: start, 
     destination: end, 
     waypoints: waypts, 
     optimizeWaypoints: true, 
     unitSystem: google.maps.UnitSystem.IMPERIAL, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } else { 
      alert('Directions request failed due to ' + status); 
     } 
    }); 
} 

function createMarker(latlng) { 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map 
    }); 
} 

/* button #show-btn */ 
$(document).on("click", "#show-btn", function(evt) { 
    initMap(); 
    createMarker(start); 
    createMarker(via); 
    createMarker(end); 

    return false; 
}); 

Answer 1

あなたは、彼らがその関数の外側の任意のコードが利用できないなら意味、あなたのcalcRoute関数内のローカル変数として変数start、viaとendを作成しています。したがって、これらの行でそれらを試して参照すると、定義されず、JSエラーが発生していると思われます。

createMarker(start); 
createMarker(via); 
createMarker(end); 

代わりにグローバル変数を作成してください。あなたがこれを行うと同時に、それらを定義します。それすなわち

var directionDisplay; 

は次のようになります。その後、

var directionDisplay, start, via, end; 

そして、あなたはcalcRoute機能でそれらを参照してくださいどこからvarキーワードを削除、つまり操作を行います。

function calcRoute() { 
    start = $('#start-input').val(); 
    via = $('#via-input').val(); 
    end = $('#end-input').val(); 

map変数にも同じ問題があります。それをローカル変数としてinitMap関数に作成してから、それにアクセスできないcreateMarker関数で参照してみてください。それもグローバル変数にしてください。