Javascript 谷歌地图API英特尔XDK航路点

对于一个学校项目，我必须使用Intel XDK、jQuery Mobile和API制作一个应用程序。我想制作一个应用程序，在其中你可以制作一条路线，并在谷歌地图上显示这条路线（就像一个travelapp来查看你的旅行）

我使用了Intel XDK（HTML5+Cordova和应用程序设计器），并从Google Maps Javascript API获得了一个API密钥

现在，我已经使用了谷歌地图API，显示了从a到B的路线。在下面的代码（这在我的脚本中）中，我尝试将航路点添加到路线中。在我的HTML代码中，我为用户提供了三个文本输入（开始、通过（=航路点）、结束）、地图和显示路线的按钮。我看过很多示例代码，但我的代码不起作用，我不知道为什么。没有错误，但如果按showbutton，则不会发生任何事情。我做错了什么或错过了什么

我希望任何人都能帮助和感谢提前

 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;
});

---

您正在将变量

start

、

via

和

end

创建为

calcRoute

函数中的局部变量，这意味着该函数之外的任何代码都无法使用这些变量。因此，当您尝试在这些行中引用它们时，它们将是未定义的，我怀疑您会遇到JS错误：

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

让它们成为全局变量；在执行此操作的同时定义它们：

 var directionDisplay;

i、 e.即：

 var directionDisplay, start, via, end;

然后从

calcRoute

函数中引用它们的位置删除

var

关键字，即执行以下操作：

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

---

您的

map

变量也有同样的问题。您可以在

initMap

函数中将其创建为局部变量，然后尝试在

createMarker

函数中引用它，该函数将无法访问它。也将其设为全局变量。

谢谢您的回答，但这不会改变任何事情。它仍然没有做任何事情。在每个函数中添加一些

console.log（）

，以了解它的进展情况。

start

、

end

和

via

的值都是什么样的？可能是因为您的

map

存在相同的问题-请参阅我的更新答案。