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

Creating multiple instances of a google API on an HTML page

本文关键字：API 实例 google 创建 HTML      更新时间：2023-09-26

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

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

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

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

相关文章：