Question

我正在创建一个网页，允许用户在文本框中输入起始位置和结束位置，并输出两个位置之间的距离（这是使用谷歌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>

Answer 1

如果您要创建多个Google地图实例，则需要确保不要混淆全局变量。您在全球范围内声明的这些变量：

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

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

在HTML网页上创建google API的多个实例

1 个答案: