0

方向マップのデフォルト表示を次のいずれかに変更したいと思います。

  • 終点の拡大画像を表示し、ルートを青色で示します
  • 終点マーカーとともに拡大バルーンを表示します (http://www.birdwingfx.com/jQuery_gps/demo_gps/gps_demo.html)。

ルート全体のみを表示するこの基本的なスクリプトを作成しました。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBSHoB4rbbeXHf_KfV-pONQvTiSLIJH_G8&sensor=false">
    </script>
    <script type="text/javascript"> 
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var bilzen = new google.maps.LatLng(50.87228390728491, 5.512539388885443);

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var Bilzen = new google.maps.LatLng(50.87228390728491, 5.512539388885443);
            var myOptions = {
                zoom:11,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: bilzen
        }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    }

  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        unitSystem: google.maps.DirectionsUnitSystem.metric
};
directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
  }
});
  }
    </script>
  </head>
  <body onload="initialize()">
<form action="#" onsubmit="calcRoute(); return false;" >
    <input name="start" id="start" value="start" type="text">
    <input name="end" id="end" value="end" type="text">
    <input name="Submit" type="submit">
    </form>

    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
4

1 に答える 1

1

http://jsfiddle.net/mR2LV/6/ [送信]をクリックし、赤い車のアイコンをクリックして情報ウィンドウを開きます。

このスクリプトは、パスがポイントAからポイントB（単純）のみであることを前提としています。2つの別々のマップを使用します。1つはインフォウィンドウの「バブル」に入り、マップ全体に入ります。アイデアは、同じ情報の2つのコピーを保持し、1つを「ズーム」に使用することです。ルートは変数にありますpath。

minimap = new google.maps.Map(document.getElementById("minimap"), miniOptions);

if(document.getElementById("minimap")) {
    document.getElementById("minimap").style.display= "block";
    infomap.setContent(document.getElementById("minimap"));
}

var path = response.routes[0].overview_path;


google.maps.event.addListener(endMarker, 'click', function(event) {
    infomap.open(map, this);
    google.maps.event.trigger(minimap, 'resize'); 
    minimap.setCenter(path[path.length-1]);
});


<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="minimap" style="width: 220px; height:200px; display: none"></div>
于 2012-05-23T17:44:19.710 に答える