0

Google ルート案内を利用するためのルート テンプレート ファイルを作成しました。スクリプトは Magento の外で動作しています。残念ながら、スクリプトを page/directions.phtml コンソールに移動すると、次のエラーが返されます。

「Uncaught ReferenceError: Google が定義されていません」

calcRoute() 関数を起動するテストをクリックしようとすると、次のエラーが発生します。

「Uncaught TypeError: 未定義のメソッド 'route' を呼び出せません」

これらのエラーは Google Maps API 呼び出しに関係していると思いますが、グラフィカル マップはページ上で正常に表示され、機能しています。これらのエラーは、具体的には、以下に示す JavaScript の 2 行目で directionService を定義するために呼び出されている google.maps.DirectionsService() と、最後に呼び出されているdirectionService.route に関連しています。どちらも方向に関連しています。

スクリプトが HTML テスト内でそのまま機能すると、地図は表示されるのにルート案内でエラーがスローされるのはなぜですか? 私は困惑している。

Javascript

  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function directionsMap() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(38.77627, -95.910965);
    var mapOptions = {
      zoom:4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById('map-directions'), mapOptions);
    directionsDisplay.setMap(map);

    //Place Markers
    var baldwinsvilleMarker = new google.maps.Marker({
        position: new google.maps.LatLng(00.00000, 00.00000),
        map: map,
        title:"store location 1"
    });
    var sacramentoMarker = new google.maps.Marker({
        position: new google.maps.LatLng(00.00000, 00.00000),
        map: map,
        title:"store location 2"
    });
    var stLouisMarker = new google.maps.Marker({
        position: new google.maps.LatLng(000.00000, -000.00000),
        map: map,
        title:"store location 3"
    });
    var catersvilleMarker = new google.maps.Marker({
        position: new google.maps.LatLng(00.000000, -84.000000),
        map: map,
        title:"store location 4"
    });

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("get-directions"));

  }

  function calcRoute() {
    console.log("calcRoute ran")
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    console.log(start + ' ' + end)
    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);
      }
    });
  }

HTML

           #I am including this line in the document head
           <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
           <style onload="directionsMap()">
            #map-directions{width: 65%; height: 300px; float: left; border:5px solid #EEEEEE;}
            #get-directions{width: 65%; float: left;}
            .map-sidebar{width: 32%; height: 300px; float: right;}
            </style>

            <div id="map-directions"></div>
            <div class="map-sidebar">
                <h2>Get Directions</h2>

                <input type="text" id="start" value="chicago, il"/>
                <b>End: </b>
                <select id="end" onchange="calcRoute();">

                  <option value="value 1">
                      store location 1
                  </option>

                  <option value="value 2">
                      store location 2
                  </option>

                  <option value="value 3">
                      store location 3
                  </option>

                  <option value="value 4">
                      store location 4
                  </option>

                </select>
                <button onclick="calcRoute();"> test</button>


            </div>
            <div id="get-directions"></div>
4

1 に答える 1

2

次のような段階的な呼び出しに従う必要があります。

  1. 最初に Google マップ API を呼び出します

  2. 次に、独自のJSを呼び出します

  3. オンロードではなく、で起動directionsMap()します。body onload=directionsMap()style

あなたの主な問題は、directionsMap()Google が読み込みを完了する前に関数を呼び出していることだと思います。

directionsMap()したがって、次のようなjQueryロードイベント内で呼び出す方が良いオプションだと思います：

$(function() {
   directionsMap()
});
于 2013-03-19T22:49:29.893 に答える