プロが教えるわが家の防犯対策術！

たくさんの経由地がある巡回ルートの描画

解決済

  • 質問者：msndance
  • 質問日時：
  • 回答数：7件

東北道の駅１４４か所の巡回ルートを設計し、巡回する道の駅の順番もすべて決まっているのですが、
この巡回ルートをgoogle map上に描画したいと思っています。

google mapのAPIだと経由地は８か所までのようなのですが、８か所ずつに分割して全部を同時描画ならできるのだろうと思います。

経由地の住所または緯度、経度を全部入力すれば一気に描画してくれるサイトあるいは、
excel VBAコードやgoogleスプレッドシートのソースコードをご紹介いただけませんでしょうか。

質問者からの補足コメント

  • http://www.kashmir3d.com/

    これってCGのソフトのようですね。
    グーグルマップとの互換性があるんでしょうか？

    また、２つの道の駅間の車ルートは自動生成してくれるんでしょうか？

    No.1の回答に寄せられた補足コメントです。 補足日時：2015/10/25 15:13
    通報する

  • 最遠挿入法をいうアルゴリズムで最短経路をつくったのでそれなりに自信はあるのですが、
    やはり全体ルートをグラフィックとして表示できて、とんでもなく最短からはずれた巡回ルートになっていないかを確認できたほうが安心です。

    http://gebweb.net/optimap
    ここだと１００か所までしかできないんです。

    No.2の回答に寄せられた補足コメントです。 補足日時：2015/10/26 12:14
    通報する

  • ＡＮｏ2にも書きましたが、一回こっきりならなおさらだと思います。、
    Ａ点、Ｂ点の経路検索・表示の関数を作っておいて、それで143回ループするのが一番簡単ではないでしょうか。
    上記の処理でよければ、ANo2であげたサンプルの、経路検索以下の12行ほどが1回分のそれに該当します。
    →143回の表示結果を合成表示できればいいんですけど

    ＞ここだと１００か所までしかできないんです。
    2回にわければ、ご提示のサイトを利用してもできるのでは？
    →一気に表示したいです。

    No.3の回答に寄せられた補足コメントです。 補足日時：2015/10/26 17:04
    通報する

  • ありがとうございます！
    冒頭のpointsに順番に場所名と緯度、経度を入れていけばいいんだと思いますが、
    このjavascriptを使っていくhtmlはどう記述したらいいんでしょうか。
    恐縮ですがhtmlの部分はありませんでしょうか。

    No.5の回答に寄せられた補足コメントです。 補足日時：2015/10/29 08:56
    通報する

  • <html>
    <head>
    <title><div id='map' style='width:800px; height:800px;'></div></title>
    </head>
    <body>
    <script type="text/javascript">
    <!--
    書いていただいたjavascript
    // -->
    </script>
    </body>
    </html>

    としたのですがブラウザ表示したら真っ白でした・・。
    書き方が間違っているのでしょうか

    No.6の回答に寄せられた補足コメントです。 補足日時：2015/10/30 13:21
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.5ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ANo4です。



ちょっとだけ時間ができたので、簡単なものを作成してみましたが、10ルート以上が表示されませんね。
調べたところ、Direktionサービスの制限（10回/秒まで）に引っかかるようです。
https://developers.google.com/maps/documentation …

これを避けるには0.1秒ごとにリクエストするなどとしなければなりませんが、100ポイントでも10秒以上かかってしまうので、ウェイポイントも併用したほうが速くできそうです。

・・・ということで、作り直しました。
時間が無くなってきたので、少々いい加減ですが・・・（汗）
「0.1秒ごとのアクセス」と「ウェイポイントの利用」で若干複雑にはなっていますが、雰囲気のご参考までに。

※ 最短距離を求めるものではありませんので、データの順に経路を表示するだけです
※ インデントは全角空白にしてあります。
※ ポイントマーカをクリックすると名称と座標値が表示されます。
(function(){
//座標データ（東海道53次）
// [ 名称, 緯度, 経度, (LatLng, Marker）]
var points = [
[ '日本橋', 35.683611, 139.774444 ],
[ '品川宿', 35.621944, 139.739167 ],
[ '川崎宿', 35.535556, 139.707778 ],
[ '神奈川宿', 35.472778, 139.632278 ],
[ '程ヶ谷宿', 35.444028, 139.595556 ],
[ '戸塚宿', 35.395028, 139.529861 ],
[ '藤沢宿', 35.345667, 139.486306 ],
[ '平塚宿', 35.327278, 139.337806 ],
[ '大磯宿', 35.309, 139.315306 ],
[ '小田原宿', 35.248722, 139.161028 ],
[ '箱根宿', 35.190417, 139.026361 ],
[ '三島宿', 35.11925, 138.914472 ],
[ '沼津宿', 35.100111, 138.857417 ],
[ '原宿', 35.125528, 138.797333 ],
[ '吉原宿', 35.162778, 138.685639 ],
[ '蒲原宿', 35.119972, 138.605472 ],
[ '由比宿', 35.107611, 138.567472 ],
[ '興津宿', 35.049833, 138.519556 ],
[ '江尻宿', 35.019889, 138.480861 ],
[ '府中宿', 34.974917, 138.387639 ],
[ '鞠子宿', 34.949417, 138.342444 ],
[ '岡部宿', 34.918833, 138.282667 ],
[ '藤枝宿', 34.869806, 138.252722 ],
[ '島田宿', 34.832806, 138.175861 ],
[ '金谷宿', 34.822861, 138.129278 ],
[ '日坂宿', 34.804139, 138.075361 ],
[ '掛川宿', 34.772917, 138.015889 ],
[ '袋井宿', 34.747472, 137.923222 ],
[ '見付宿', 34.726806, 137.857028 ],
[ '浜松宿', 34.705111, 137.731917 ],
[ '舞坂宿', 34.684389, 137.608944 ],
[ '新居宿', 34.694139, 137.560778 ],
[ '白須賀宿', 34.688556, 137.500833 ]

//　以下略
];

//経路探索オブジェクト
var $directS = new google.maps.DirectionsService();
// ラインの色設定とか
var $lineOptions = {
　polylineOptions: { strokeWeight: 3, strokeColor: "#04F", strokeOpacity: 0.6 },
　markerOptions: { visible: false }
};
//地図オブジェクト
var $map =　new google.maps.Map(document.getElementById("map"), {
　mapTypeId: google.maps.MapTypeId.ROADMAP
});
//インフォウィンドウオブジェクト
var $infoW = new google.maps.InfoWindow();


//各ポイントのマーカー作成処理
var createMarker = function(pt){
　var marker = new google.maps.Marker({
　　position: pt[3],
　　map: $map
　});
　google.maps.event.addDomListener(marker, "click", (function(p){
　　return function(){
　　　$infoW.setContent(p[0] + "<br>( " + p[1] + ", " + p[2] + " )");
　　　$infoW.setPosition(p[3]);
　　　$infoW.open($map);
　　}
　})(pt));
　return marker;
}

//経路表示処理（1リクエスト最大10ポイント）
var route = function(){
　var renderer = null, wayP = [];
　var p1 = points[pointIndex];
　var j, n = pointNum - pointIndex - 2;

　if(n>8) n = 8;
　var endIndex = pointIndex + n + 1, p2 = points[endIndex];　
　for(j=pointIndex+1; j<endIndex; j++) wayP.push({
　　location: points[j][3], stopover: true
　});
　pointIndex = endIndex;

　var request = {
　　origin: p1[3],
　　destination: p2[3],
　　waypoints: wayP,
　　travelMode: google.maps.DirectionsTravelMode.DRIVING
　};
　$directS.route(request, function(response, status){
　　if (status == google.maps.DirectionsStatus.OK){
　　　renderer = new google.maps.DirectionsRenderer();
　　　renderer.setMap($map);
　　　renderer.setOptions( $lineOptions );
　　　renderer.setDirections( response );
　　}
　});

　if(pointIndex < pointNum - 1) setTimeout( route, 101);
}


//メイン処理
var pointIndex = 0, pointNum = points.length;
var i, p = points[0];
var mBound = new google.maps.LatLngBounds(
　 { lat: p[1], lng: p[2] },　{ lat: p[1]+0.05, lng: p[2]+0.05 }
);
for(i=0; i<pointNum; i++){
　var p = points[i];
　p[3] = new google.maps.LatLng(p[1], p[2]);
　mBound = mBound.extend(p[3]);
　p[4] = createMarker(p);
}
$map.fitBounds(mBound);
route();

})();
この回答への補足あり
    • good
    • 0
    • 件
通報する

うーん・・・

No.7

  • 回答者： fujillin
  • 回答日時：

ANo6です。



＞ブラウザ表示したら真っ白でした・・。
＞書き方が間違っているのでしょうか
というよりも前に…そもそもの.HTML文書がおかしくない？

なぜにtitleタグの中にdiv要素が・・・？？
titleは文書タイトルを示す要素で、テキストのみが許容されています。
https://developer.mozilla.org/ja/docs/Web/HTML/E …


もともと、当初のご質問文で、
＞google mapのAPIだと経由地は８か所まで～～
とのことでしたので、当然そういうご質問だとばかり思っていましたが、意味が違ったのかしらん？？

…ですので、サンプルはgoogle map APIの利用を前提にしています。
最初にAPIを読み込んでください。
https://developers.google.com/maps/documentation …

なお、（↑）のサイトはgoogleが提供しているリファレンスサイトですので、APIに関しての各種情報や解説が詳細に記されています。
マップ関連で何かを調べたいときは、ここで調べるのが一番と思います。
（例示したサンプルもこのリファレンスを参照しながら作成しています）
    • good
    • 0
    • 件
通報する
この回答へのお礼

APIキーが必要だったんですね
取得しようとしたんですがサーバーキーとかブラウザキーとか種類があるようです
どの種類を選んで取得すればいいんでしょうか。。

通報する
お礼日時：2015/11/03 17:12

No.6

  • 回答者： fujillin
  • 回答日時：

ANo5です。



＞このjavascriptを使っていくhtmlはどう記述したらいいんでしょうか。
マップ表示用のDIV要素等があればＯＫです。
例えば、
　<div id='map' style='width:800px; height:800px;'></div>
とか。

念のため、実行結果の例を画像添付しておきます。
「たくさんの経由地がある巡回ルートの描画」の回答画像6
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： fujillin
  • 回答日時：

ANo3です。



＞→143回の表示結果を合成表示できればいいんですけど
おっと、失礼しました。
同じ、DirectionsRendererで再表示させると書き直しちゃうみたいですね。うっかりしてました。
経路ごとに、新しいDirectionsRendererを作成してあげれば同時に表示できるはずと思います。

検索で返されたルートデータを合成して、表示する方法も考えられると思いますが、少々面倒かも。
（以下、ルート上の距離を分析しながら、経路を直接ポリラインで表示している例）
https://oshiete.goo.ne.jp/qa/8800586.html
    • good
    • 1
    • 件
通報する

No.3

  • 回答者： fujillin
  • 回答日時：

ANo2です。



全体を巡回する最短ルートを求めることと、指定ルートの検索は全く別の処理になると思いますが、最短ルートの求め方についてのご質問ではないですよね？

座標も順序もすでに一応決まっていて、結果を確認するために一度経路を表示させてみたいってことでいいのでしょうか？

ＡＮｏ2にも書きましたが、一回こっきりならなおさらだと思います。、
Ａ点、Ｂ点の経路検索・表示の関数を作っておいて、それで143回ループするのが一番簡単ではないでしょうか。
上記の処理でよければ、ANo2であげたサンプルの、経路検索以下の12行ほどが1回分のそれに該当します。


＞ここだと１００か所までしかできないんです。
2回にわければ、ご提示のサイトを利用してもできるのでは？
この回答への補足あり
    • good
    • 0
    • 件
通報する

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは。




＞巡回する道の駅の順番もすべて決まっているのですが、
順序が決まっているのであれば、毎回ルートを検索する必要もないように思います。
新しい道ができたりすると、ルートが変わる可能性はありますが、そのために毎回検索するというのも非効率的に思います。
事前に一度ルート検索をしておいて、そのデータを保管し、表示にはそのデータを用いれば良いのではないでしょうか？

＞経由地は８か所までのようなのですが
一度の計算での経由地の制限なので、経由地を指定してルート検索するのと、1箇所ずつ始点、終点を入れ替えて検索するのとで、検索されるルートが変わることはないと思います。（サーバの負荷や計算に必要な時間が若干異なるかも）
ループで143回検索してそのルートデータを保管しておけばよさそうな気がします。


利用形態がよくわかりませんけれど、一度に全経路を表示するよりも、指定された必要な経路（その日の経路とか？）を表示してあげるといったＵＩの方が扱いやすいかもしれないような気もします。（わかってないのに、勝手な想像ですが…）

＞excel VBAコードやgoogleスプレッドシートのソースコード
表示はブラウザで行うのではないのでしょうか？
エクセルやスプレッドシートの理由がよくわかりませんが・・・

google map APIを利用して動的にルート検索・表示をする例
　https://oshiete.goo.ne.jp/qa/8159078.html
（毎回検索・表示したいというのであれば、ポイント数だけループすればよろしいのでは）
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： mirukudesu
  • 回答日時：

カシミール３Ｄでデータ作成して、グーグルマップにデータ読ませる。

この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報