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