0

我正在创建一个网页，允许用户在文本框中输入开始位置和结束位置，并输出两个位置之间的距离（这是使用谷歌 API）。我已经成功地创建了一个可以按我想要的方式工作的单个实例。但是我的问题是我需要多行这样但是一旦我复制代码我似乎无法让它工作。这是我第一次真正尝试使用 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;

因此，如果您尝试创建第二个映射并将映射分配给map变量，这应该会破坏前一个映射。同样，您的 DirectionsService。因此，您需要为每个实例的每个变量创建一个变量。

于 2012-04-05T00:04:08.000 回答