-1

ご協力いただきありがとうございます。

まとめRuby on Rails でビルドされた Google Maps API V2 マップ アプリケーションがあり、V3 に変換しようとしています。「 Gmaps v2 から v3 へのアップグレードをより迅速に行うためのヒント」のアドバイスを使用して、既存の JavaScript を更新しました。ただし、私のマップはまだページに表示されません。

詳細:このコードは、V2 を使用して、ポイント A からポイント B への一連の一意のマップを 1 つの Web ページに表示します。ユーザーは多くの保存済みマップを持つことができ、このコードはそれらを表示します。現在、マップ キャンバスとルートは解決されません。

繰り返しますが、私はあなたの助けに感謝します!

編集 3: 問題は calcRoute() です

私はすべてを見て、開始変数と終了変数を追加し始めるまでマップが機能することを理解しました。これらの変数は機能しているように見えますが、道順とルートは表示されません。これらの変数をロードする際に間違っていることはありますか? 元のjsと結果の両方を提供しました。

オリジナル:

function calcRoute() {
var start = <%= savedmap.from %>;
var end = <%= savedmap.to %>;
var request = {
 origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

結果:

function calcRoute() {
var start = 4400 Massachusetts Ave NW Washington, District of Columbia, 20016-8001;
var end = 2121 I Street- NW Washington, District of Columbia, 20052;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

編集 2: 投稿された結果

要求に応じて、 EDIT 1にリストされているスクリプトを使用したときに何が起こるかの結果を次に示します

<head>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
        <script type="text/javascript"> 

      var directionsDisplay7656;
      var directionsService7656 = new google.maps.DirectionsService();
      var map7656;

      function initialize() {
        directionsDisplay7656 = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(41.850033, -87.6500523);
        var mapOptions = {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: chicago
        }
        map7656 = new google.maps.Map(document.getElementById("map_canvas7656"), mapOptions);
        directionsDisplay7656.setMap(map7656);
      }

      function calcRoute() {
        var start = 350 5th Ave New York, NY 10118;
        var end = 2 Lincoln Memorial Cir  Washington, DC 20037;
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService7656.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay7656.setDirections(response);
          }
        });
      }

        </script>
</head>
<body id="itineraries"
 onload="initialize()">

<input id="auth_token" class="hidden" name="" type="hidden" value="VALUEHERE=" />
<div class="wholemap">
<h4>test</h4>

    <div class="map" id="map_canvas7656"></div>
    <div class="route" id="route7656"></div>
    <div class="clear"></div>
    <a id="print7656" target="_blank" class="printmap">Print this map</a>
    <a class="removemap" href="/savedmaps/7656">Delete this map</a>
    <div class="clear"></div>
    </div>
</body

編集 1: 2 回目の試行

今回は、Google のルート案内の例から始めました。残念ながら、まだ運がありません。

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
<script type="text/javascript"> 
    <% for savedmap in @maps %>
      var directionsDisplay<%= savedmap.id %>;
      var directionsService<%= savedmap.id %> = new google.maps.DirectionsService();
      var map<%= savedmap.id %>;

      function initialize() {
        directionsDisplay<%= savedmap.id %> = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(41.850033, -87.6500523);
        var mapOptions = {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: chicago
        }
        map<%= savedmap.id %> = new google.maps.Map(document.getElementById("map_canvas<%= savedmap.id %>"), mapOptions);
        directionsDisplay<%= savedmap.id %>.setMap(map<%= savedmap.id %>);
      }

      function calcRoute() {
        var start = <%= savedmap.from%>;
        var end = <%= savedmap.to %>;
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService<%= savedmap.id %>.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay<%= savedmap.id %>.setDirections(response);
          }
        });
      }
    <% end %>
        </script>

上記は最新バージョンです。元のコードの投稿は次のとおりです

Javascript:

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
    <script type="text/javascript"> 

    <% for savedmap in @maps %>
        var map<%= savedmap.id %>;
        var resultx<%= savedmap.id %>;
        var directionsPanel<%= savedmap.id %>;
        var directions<%= savedmap.id %>;
    <% end %>   
        function initialize() {
            var marker = new google.maps.marker(new google.maps.LatLng(-30.368374, -71.089182)); //initialize a marker out in the middle of nowhere
            google.maps.event.addListener(marker, 'click', function() {  
            });  
            <% for savedmap in @maps %>
                map<%= savedmap.id %> = new google.maps.Map(document.getElementById("map_canvas<%= savedmap.id %>"));
                map<%= savedmap.id %>.setCenter(new google.maps.LatLng(42.351505,-71.094455), 15);
                directionsPanel<%= savedmap.id %> = document.getElementById("route<%= savedmap.id %>");
                directions<%= savedmap.id %> = new google.maps.directions(map<%= savedmap.id %>, directionsPanel<%= savedmap.id %>);
                directions<%= savedmap.id %>.load("from: <%= savedmap.from %> to: <%= savedmap.to %>");
                //google.maps.event.addListener(directions<%= savedmap.id %>, "error", handleErrors);

                map<%= savedmap.id %>.addOverlay(marker);
                map<%= savedmap.id %>.addControl(new google.maps.SmallMapControl());
                map<%= savedmap.id %>.addControl(new google.maps.MapTypeControl());
                $('a#print<%= savedmap.id %>').attr('href', 'http://maps.google.com/maps?f=q&q=from: <%= savedmap.from %> to: <%= savedmap.to %>&t=h&z=13&layer=c&pw=2')                    
            <% end %>
          }
       /*function handleErrors(){
               if (directions<%= savedmap.id %>.getStatus().code == G_GEO_UNKNOWN_ADDRESS)

                 alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + directions<%= savedmap.id %>.getStatus().code);
               else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_SERVER_ERROR)
                 alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + directions<%= savedmap.id %>.getStatus().code);

               else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_MISSING_QUERY)
                 alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

            //   else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong
            //     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);

               else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_BAD_KEY)
                 alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + directions<%= savedmap.id %>.getStatus().code);

               else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_BAD_REQUEST)
                 alert("A directions request could not be successfully parsed.\n Error code: " + directions<%= savedmap.id %>.getStatus().code);

               else alert("An unknown error occurred.");

            } */
        </script>

Maps.html.erb コード

<% for savedmap in @maps %>

    <div class="wholemap">
        <% if savedmap.name != nil and savedmap.name != '' %>
        <h4><%= savedmap.name %></h4>
        <% else %>
        <h4>Untitled Map</h4>
        <% end %>
        <a class="directions" href="#">Show Driving Directions</a>
    <div class="clear"></div>
    <div class="map" id="map_canvas<%= savedmap.id %>"></div>
    <div class="route" id="route<%= savedmap.id %>"></div>
    <div class="clear"></div>
    <a id="print<%= savedmap.id %>" target="_blank" class="printmap">Print this map</a>
    <a class="removemap" href="/savedmaps/<%= savedmap.id %>">Delete this map</a>
    <div class="clear"></div>
    </div>
<% end %>

この旅行の地図はまだ追加されていません。

4

1 に答える 1

0

ここでいくつかのことが起こっていると思います。

1)v3では、APIを参照する方法が異なります。こんな感じになります。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

2)初期化関数がありますが、onloadなどのどこにも呼び出していません。

google.maps.event.addDomListener(window, 'load', initialize);

3)マップを設定する方法は、渡されるオプション配列を設定するのに最適です。

var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-30.368374, -71.089182),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

4)マーカーは、このように設定してみてください。

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-30.368374, -71.089182),
    map: map1,
    title: 'Hello World!'
});
google.maps.event.addListener(marker, 'click', function() {  
    alert('here');
});

Maps APIの例のページ(https://developers.google.com/maps/documentation/javascript/examples/)をご覧ください。私はこれがあなたをまっすぐにするべきだと思います。

Rubyコードなしで問題を機能させることにより、問題を解決します。最初にJavascriptを使用し、1つのマップが機能するようになったら、Rubyを追加し直します。すべてのRubyコードを削除し、上記のいくつかの変更を加えて、マーカーが表示されたマップを取得しました。

-クリス

于 2013-03-18T01:33:09.280 に答える