Google Maps Api json 応答から html_instructions を読み取るのに問題があります。Json オブジェクトの扱いに慣れていないことが主な原因だと思いますが、これに役立つ答えを見つけることができません。
Google のルート案内サービスの例に続いて、JavaScript で calcRoute 関数を作成しました。この関数は、開始場所と終了場所を投稿し、json 形式で運転指示のリストを受け取ります。地図上にルートをすべてうまく描画します。ただし、運転手順をリストしたい場合は、各ステップの距離と所要時間を含むステップのリストを作成できますが、html_instructions に対しては常に「未定義」を返します。受け取ったjsonを見ると、各ステップにテキスト付きのhtml_instructions属性がありますが、コードでアクセスできません。シンプルにそうだと思ったので、何が欠けているのですか？
function calcRoute() {
var start = document.getElementById('start').value;
try {
var request = {
origin: start,
destination: bowenSense,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
parseJson(response);
directionsDisplay.setDirections(response);
}
else {
alert("Error: " + status);
}
});
}
catch (error) {
alert("Error: " + error);
};
}
function parseJson(response) {
for (i = 0; i < response.routes.length; i++) {
var route = response.routes[i];
for (j = 0; j < route.legs.length; j++) {
var leg = route.legs[j];
// Do something with leg attributes...
for (k = 0; k < leg.steps.length; k++) {
var step = leg.steps[k];
var distance = step.distance.text; // fine
var duration = step.duration.text; // fine
var instruction = step.html_instructions; // == undefined ?
alert("instruction: " + instruction);
var mode = step.travel_mode; // works
}
}
}
}
返された JSON の例。入力された html_instructions 値を示しています
....
"steps" : [
{
"distance" : {
"text" : "0.4 mi",
"value" : 695
},
"duration" : {
"text" : "1 min",
"value" : 61
},
"end_location" : {
"lat" : 53.3590723,
"lng" : -1.5065088
},
"html_instructions" : "Head \u003cb\u003ewest\u003c/b\u003e on \u003cb\u003eBannerdale Rd\u003c/b\u003e toward \u003cb\u003eNeedham Way\u003c/b\u003e",
"polyline" : {
"points" : "i~sdIjscHUvAi@vD[vAk@fC}@hDMf@[v@c@vAiA|Dy@dCuAzD[r@EJGLMXOTINQRUTYPSNOJQJSPOR"
},
"start_location" : {
"lat" : 53.3554115,
"lng" : -1.4983018
},
"travel_mode" : "DRIVING"
},
....
不可解なことは、html_instruction と travel_mode の両方が文字列値であり、一方が機能し、他方が機能しないということです。これは文字列の内容の問題ですか? html_instructions 文字列には多くの '\u* * ' (ユニコード?) でエンコードされた文字が含まれていますが、travel_mode は昔ながらの大文字のセットですか?
これについての助けをいただければ幸いです。事前に感謝します。ps問題があれば、最新バージョンのFirefoxブラウザーを使用しています。