Google Maps のAPIを用いてAndroid アプリを開発しているのですが、Google Mapsのルート検索でルートを決定した後、そのルート上を歩いているようにみせかける(シミュレーション)を行うことは可能でしょうか?

分かる方宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

こんにちは。



>そのルート上を歩いているようにみせかける
というのが、どのように表示をしようとしているのかわかりませんが・・・

ルートを表示するだけなら、DirectionsRendererを利用することで比較的簡単にできます。
自分で制御して書くなら、ポリラインを利用して描画することも可能です。
あるいはルートを辿って人型がアニメーションで移動するとかでしょうか?


以前の質問で「ルート検索をし、それに沿って距離を何分割かして表示したい」というものがありました。
 http://oshiete.goo.ne.jp/qa/8793696.html

コードの提示前に締め切られちゃったので投稿してませんが、以下ご参考までに。
ルートの解析など余分な部分が入っていますが、多少似たところがあるかと思います。


※ピクセル数などはPCを想定しています。
※スタート、ゴールはドラッグ可能。例ではルートを4分割で表示。
※分割点をクリックするとその座標が表示されます。
※以下、全角空白は半角に。
 (文字数制限のため2分割になります)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …
</head>

<body>
<div style="width:860px;">
<div id="map" style="float:left; width:640px; height:600px;"></div>
<div id="route" style="float:right; font-size:11pt; width:220px;"></div>
</div>

<!-- 以下続く -->
    • good
    • 0
この回答へのお礼

遅くなりましたが、有難う御座います!
参考になりました!

お礼日時:2015/06/21 22:31

<!-- 続き -->


<script type="text/javascript">
(function(){

//地図表示
var mapDisp = function(lat, lng, id){
 return new google.maps.Map(document.getElementById(id), {
  zoom: 15,
  center: new google.maps.LatLng(lat, lng),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scaleControl: true,
  scrollwheel: false
 });
}

//マーカー作成
var createMarker = function(char, lat, lng, col){
 var flg = !!(char=="S" || char=="G");
 var chst = "d_map_pin_letter_withshadow";
 var chld = char + "|" + col + "|000000";
 var icon = {
  anchor: {x:10, y:34},
  url: "http://chart.apis.google.com/chart?chst=" + chst + "&chld=" + chld
 };
 var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  map: $map, draggable: flg, icon: icon
 });
 if(flg) google.maps.event.addDomListener(marker, "dragend", routeSearch);
 return marker;
}

var clickHandler = function(n){
 return function(){
  var msg = "point " + (n+1) + "\n\n" + round($markers.sectors[n].getPosition());
  alert(msg);
 }
}

var initMarker = function(){
 var m = {
  start: createMarker("S", 35.6908, 139.7564, "AABBFF"),
  goal: createMarker("G", 35.6786, 139.7609, "FFAAAA"),
  sectors: [],
  sectorsNum: 3,
  sectorsDef: 0,
  clearSector: function(){
   for(var i=0; i<this.sectorsNum; i++) this.sectors[i].setVisible(false);
   this.sectorsDef = 0;
  },
  setSector: function(pt){
   if(this.sectorsDef<this.sectorsNum){
    var sec = this.sectors[this.sectorsDef++];
    sec.setPosition(pt);
    sec.setVisible(true);
   }
  }
 }

 for(var i=0; i<m.sectorsNum; i++){
  var sec = createMarker((i+1).toString(), 0, 0, "FFFF66");
  google.maps.event.addDomListener(sec, "click", clickHandler(i));
  m.sectors[i] = sec;
 }
 m.clearSector();
 return m;
}

//ラインObject作成
var polyLine = function(){
 return new google.maps.Polyline({
  strokeColor: '#006644',
  strokeOpacity: 0.5,
  strokeWeight: 6,
  map: $map
 });
}


//経路検索
var routeSearch = function(){
 var request = {
  origin: $markers.start.getPosition(),
  destination: $markers.goal.getPosition(),
  travelMode: google.maps.TravelMode.DRIVING
 };
 directionS.route(request, function(response, status){
  if (status == google.maps.DirectionsStatus.OK) pathCombine(response);
 });
}


//経路統合・表示
var pathCombine = function(r){
 var step, leg = r.routes[0].legs[0];
 var path = new google.maps.MVCArray();
 var i, p, j, pt;
 for(i=0; step=leg.steps[i++];){
  p = google.maps.geometry.encoding.decodePath(step.polyline.points);
  for(j=0; pt=p[j++];) if(!(i>1&&j==1)) path.push(pt);
 }
 $pathLine.setPath(path);
 pathAnalyze(path);
}

//経路解析
//(座標値リスト作成・区間点表示)
var rd = function(n){ return Math.round(n*10000)/10000; }
var round = function(pt){
 return " ( " + rd(pt.lat()) + ", " + rd(pt.lng()) + " )";
}
var interpolate = function(path, r){
 var p1 = path.getAt(0), p2 = path.getAt(1);
 var lat = (p2.lat() - p1.lat()) * r + p1.lat();
 var lng = (p2.lng() - p1.lng()) * r + p1.lng();
 return { lat:lat, lng:lng };
}

var pathAnalyze = function(path){
 var i, pt = path.getAt(0);
 var subPath = new google.maps.MVCArray();
  subPath.push(pt);
 var sd = google.maps.geometry.spherical.computeLength(path);
 var subD = 0, secD = sd / 4;
  sd = Math.round(sd*100)/100;
 var txt = "【 座標リスト 】<br>全長=" + sd;
  txt += "<ul style='margin:0;'><li>#1" + round(pt) + "</li>";

 $markers.clearSector();
 for(i=1; pt=path.getAt(i++);){
  subPath.push(pt);
  sd = google.maps.geometry.spherical.computeLength(subPath);
  txt += "<li>#" + i + round(pt) + "</li>";
  subD += sd;

  while(subD >= secD){
   subD -= secD;
   var secP = interpolate(subPath, (sd - subD)/sd);
   sd = subD;
   $markers.setSector(secP);
   subPath.setAt(0, new google.maps.LatLng(secP.lat, secP.lng));
  }
  subPath.removeAt(0);
 }
 document.getElementById("route").innerHTML = txt + "</ul>";
}


//初期設定
var $map = mapDisp(35.684, 139.756, "map");
var directionS = new google.maps.DirectionsService();
var $markers = initMarker();
var $pathLine = polyLine();

routeSearch();

})();
</script>
</body>
</html>
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード


人気Q&Aランキング