在HTML頁面上創建一個google API的多個實例

我正在創建一個網頁，讓用戶在文本框中輸入開始位置和結束位置，並輸出兩個位置之間的距離（這是使用google API ）。我已經成功地創建了一個可以按照我的需要工作的單個實例。然而，我的問題是，我需要多行這一點，但只要我複製代碼，我似乎無法得到它的工作。這是我第一次使用JavaScript的真正嘗試，所以我對它的理解並不好。我意識到我需要改變變量等，但我不確定如何改變。對不起，如果我不清楚，但任何幫助將是偉大的，謝謝。在HTML頁面上創建一個google API的多個實例

這裏是我的代碼：

<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>

來源

2012-04-04 Rosco

您是否需要一條路線的多個路線或多個航點？ – Michal 2012-04-04 23:06:08

我需要它的多個路線 – Rosco 2012-04-04 23:11:01

如果您正在創建谷歌地圖的多個實例，你需要確保你不是混合增加全局變量。這些變量你在全球範圍內宣佈：

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

因此，如果您嘗試創建第二個地圖和分配映射到map變量，它應該銷燬以前的地圖。同樣你的DirectionsService。所以你需要爲每個實例創建一個變量。

來源

2012-04-05 00:04:08

這就是它現在的工作，非常感謝您的幫助！ – Rosco 2012-04-05 15:05:22

在HTML頁面上創建一個google API的多個實例

回答

相關問題