Javascript 在HTML页面上创建google API的多个实例_Javascript_Google Maps Api 3_Google Api

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

javascript google-maps-api-3 google-api

Javascript 在HTML页面上创建google API的多个实例,javascript,google-maps-api-3,google-api,Javascript,Google Maps Api 3,Google Api,我正在创建一个网页，允许用户在文本框中输入开始位置和结束位置，并使用谷歌API输出两个位置之间的距离。我已经成功地创建了一个这样的实例，它可以按我所希望的那样工作。然而，我的问题是，我需要多行代码，但一旦我复制了代码，我似乎无法让它工作。这是我第一次真正尝试使用javascript，所以我对它的理解不是很好。我意识到我需要改变变量等，但不确定到底要改变什么。对不起，如果我不够清楚，但任何帮助都会很好，谢谢这是我的密码： <body onload="initialize()"> &

我正在创建一个网页，允许用户在文本框中输入开始位置和结束位置，并使用谷歌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;
            }
        });
    }

如果要创建多个谷歌地图实例，需要确保没有混淆全局变量。您在全局级别声明的这些变量：

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

因此，如果您尝试创建第二个映射并将该映射指定给map变量，这将破坏前一个映射。同样，你的指导服务。因此，您需要为每个实例的每个路径创建一个变量。

一条路径需要多条路线还是多个航路点？我需要多条路线

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