谷歌地图 API 英特尔 XDK 航点

Question

对于一个学校项目，我必须使用 Intel XDK、jQuery Mobile 和 API 制作一个应用程序。我想制作一个应用程序，您可以在其中制作路线并在 google-maps-map 上显示该路线（例如用于查看您的旅行的 travelapp）。

我使用了 Intel XDK（HTML5 + Cordova 和 App Designer）并从 Google Maps Javascript API 获得了一个 API 密钥。

现在，我已经使用了 Google Maps API，并且显示从 A 到 B 的路线很顺利。在以下代码中（这是在我的脚本中），我尝试将航点添加到我的路线中。在我的 HTML 代码中，我为用户提供了三个文本输入（开始、通过 (=waypoint)、结束）、地图和显示路线的按钮。我查看了许多示例代码，但我的代码不起作用，我不知道为什么。没有错误，但如果你按下显示按钮，什么也不会发生。我做错了什么或错过了什么？

希望任何人都可以帮助并提前致谢！

 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

您正在创建变量 start、via 和 end 作为 calcRoute 函数中的局部变量，这意味着它们不可用于该函数之外的任何代码。因此，当您尝试在这些行中引用它们时，它们将是未定义的，我怀疑您遇到了 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 函数中引用它。也将其设为全局变量。