0

2 つのテキスト ボックスにオートコンプリートを使用します。次のコードを使用すると、問題なく動作します。

$('[id$=PlaceOfDeparture]:not(.ui-autocomplete-input), [id$=PlaceOfArrival]:not(.ui-autocomplete-input)').live('focus', function () {
    $(this).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://dev.virtualearth.net/REST/v1/Locations",
                dataType: "jsonp",
                data: {
                    key: 'mykey',
                    q: request.term
                },
                jsonp: "jsonp",
                success: function (data) {
                    var result = data.resourceSets[0];
                    if (result) {
                        if (result.estimatedTotal > 0) {
                            response($.map(result.resources, function(item) {
                                return {
                                    data: item,
                                    label: item.name + '( ' + item.address.countryRegion+ ')',
                                    value: item.name
                                };
                            }));
                        }
                    }
                }    


            });
        },
        minLength: 1,
        select: function (event, ui) {
            $(this).val(ui.item.value);
            travel = $(this).closest('div').parent();
            $(this).change();
            updateMap();
        },
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
});

});

それはうまくいきます。次に、bing map で地図上の場所の間に線を引きたいと思います。

  bingMap = new Microsoft.Maps.Map(document.getElementById("map_canvas"), {
    credentials: "mykey",
    mapTypeId: Microsoft.Maps.MapTypeId.auto,
    enableSearchLogo: false,
    enableClickableLogo: false,
    showDashboard: false,
    center: new Microsoft.Maps.Location(55.7, 13.1833333),
    zoom: 10
});
Microsoft.Maps.loadModule("Microsoft.Maps.Directions", { callback: directionsModuleLoaded });

これを使用して、ウェイポイントを bing マップに設定します。

 var startwaypoint = new Microsoft.Maps.Directions.Waypoint({ address: placeOfDeparture });
                bingDirections.addWaypoint(startwaypoint);

                // end
                var endwaypoint = new Microsoft.Maps.Directions.Waypoint({ address: placeOfArrival });
                bingDirections.addWaypoint(endwaypoint);

                // Calculate directions, which displays a route on the map
                bingDirections.calculateDirections();

最初の 2 つの ajaxpost は問題なく動作し、私が読んだ "statusCode":200 は良いはずです :) しかし、次に bingDirections.calculateDirections(); を実行すると これを返します:

microsoftMapsNetworkCallback({"resolvedWaypoints":[[{"failed":true,"invalidCredentials":false,"inputType":0,"latitude":0,"longitude":0,"rooftopLatitude":0,"rooftopLongitude": 0,"address":null,"disambiguation":null,"locationIdentifier":null},{"failed":true,"invalidCredentials":false,"inputType":0,"緯度":0,"経度": 0,"rooftopLatitude":0,"rooftopLongitude":0,"address":null,"disambiguation":null,"locationIdentifier":null}]]}, 'd6392');

4

1 に答える 1