0

ユーザーが開始場所と終了場所をテキストボックスに入力できるようにするWebページを作成しています.2つの場所の間の距離が出力されます(これはGoogle APIを使用しています)。希望どおりに機能するこのインスタンスを 1 つ作成することに成功しました。ただし、私の問題は、これを複数行必要とすることですが、コードを複製するとすぐに機能しないようです。これは、javascript を実際に使用する最初の試みであるため、JavaScript についての理解はそれほど大きくありません。変数などを変更する必要があることは認識していますが、何を変更すればよいか正確にはわかりません。私が十分に明確でなかったら申し訳ありませんが、どんな助けでも素晴らしいでしょう、ありがとう。

これが私のコードです：

<body onload="initialize()">

<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var belfast = new google.maps.LatLng(55, -5)
    var myOptions = {
        zoom:5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: belfast,
    }

    map = new google.maps.Map(document.getElementById("map_canvas1"), myOptions);
        directionsDisplay.setMap(map);
    }

function calcRoute() {
    var start = document.getElementById("pc1").value;
    var end = document.getElementById("pc2").value;

    var distanceInput = document.getElementById("distance");
    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);
            distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
            }
        });
    }


<td><input type="text" id="pc1" /></td>

4

1 に答える 1

0

Google マップの複数のインスタンスを作成している場合は、グローバル変数を混同していないことを確認する必要があります。グローバル レベルで宣言しているこれらの変数:

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

したがって、2 番目のマップを作成してそのマップをmap変数に割り当てようとすると、前のマップが破棄されます。同様に、DirectionsService. したがって、インスタンスごとに変数を作成する必要があります。

于 2012-04-05T00:04:08.000 に答える