在哪裏輸入密鑰代碼爲谷歌距離矩陣

我已經創建了幾個使用谷歌距離的網頁。我爲Google提供了JavaScript和HTML示例代碼，並對其進行了調整以達到我的目的。他們似乎說我需要一個API密鑰來使用該服務，但是如果沒有它，我的頁面就可以正常工作。首先，當我希望每天需要幾百個請求時，使用API密鑰至關重要。如果這一點至關重要，我可以在以下Google示例代碼中將API密鑰放在哪裏？在哪裏輸入密鑰代碼爲谷歌距離矩陣

function initialize() { 
    var opts = { 
    center: new google.maps.LatLng(55.53, 9.4), 
    zoom: 10 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), opts); 
    geocoder = new google.maps.Geocoder(); 
} 

function calculateDistances() { 
    var service = new google.maps.DistanceMatrixService(); 
    service.getDistanceMatrix(
    { 
     //origins: [origin1, origin2], 
    origins: [origin2], 
     //destinations: [destinationA, destinationB], 
    destinations, 
     travelMode: google.maps.TravelMode.DRIVING, 
     unitSystem: google.maps.UnitSystem.METRIC, 
     avoidHighways: false, 
     avoidTolls: false 
    }, callback); 
} 

function callback(response, status) { 
    if (status != google.maps.DistanceMatrixStatus.OK) { 
    alert('Error was: ' + status); 
    } else { 
    var origins = response.originAddresses; 
    var destinations = response.destinationAddresses; 
    var outputDiv = document.getElementById('outputDiv'); 
    outputDiv.innerHTML = ''; 
    deleteOverlays(); 

    for (var i = 0; i < origins.length; i++) { 
     var results = response.rows[i].elements; 
     addMarker(origins[i], false); 
     for (var j = 0; j < results.length; j++) { 
     addMarker(destinations[j], true); 
     outputDiv.innerHTML += origins[i] + ' to ' + destinations[j] 
      + ': ' + results[j].distance.text + ' in ' 
      + results[j].duration.text + '<br>'; 
     } 
    } 
    } 
} 

function addMarker(location, isDestination) { 
    var icon; 
    if (isDestination) { 
    icon = destinationIcon; 
    } else { 
    icon = originIcon; 
    } 
    geocoder.geocode({'address': location}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     bounds.extend(results[0].geometry.location); 
     map.fitBounds(bounds); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location, 
     icon: icon 
     }); 
     markersArray.push(marker); 
    } else { 
     alert('Geocode was not successful for the following reason: ' 
     + status); 
    } 
    }); 
} 

function deleteOverlays() { 
    for (var i = 0; i < markersArray.length; i++) { 
    markersArray[i].setMap(null); 
    } 
    markersArray = []; 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="content-pane"> 
     <div id="inputs"> 
     <pre> 
var origin1 = new google.maps.LatLng(55.930, -3.118); 
var origin2 = 'Greenwich, England'; 
var destinationA = 'Stockholm, Sweden'; 
var destinationB = new google.maps.LatLng(50.087, 14.421); 
     </pre> 
     <p><button type="button"  onclick="calculateDistances();">Calculate 
      distances</button></p> 
     </div> 
     <div id="outputDiv"></div> 
    </div> 
    <div id="map-canvas"></div> 
    </body>

來源

2015-09-09 Timothy Hagan

我所知有插入谷歌地圖API密鑰插入JavaScript代碼（我假設你想做到這一點），沒有明確的方式。

執行此操作的一般方法是使用標準JavaScript標記引用該鍵，並將它放在src屬性中。

例子：

<script> 
    src="https://maps.googleapis.com/maps/api/js?key=123456ABCDEFG&sensor=false" 
    </script>

由於您的呼籲使用DomListener它調用的API關鍵是要走的路上面的例子中你的谷歌地圖，其他然後，你也可以打電話給你的谷歌地圖功能通過這條線的，其始終在谷歌顯示的代碼映射官方的文檔：

<script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize"> 
    </script>

async關鍵字意味着，HTML（網頁）不必等待谷歌地圖API，以響應去任DER。基本上，HTML（除了谷歌地圖）呈現，然後當實際地圖準備就緒時，它會加載。如果您選擇此選項，請清除DomListener一行代碼。

的其他部分可以在谷歌的官方網頁中找到映射

網址：https://developers.google.com/maps/documentation/javascript/tutorial#api_key

來源

2015-09-09 13:07:04

在哪裏輸入密鑰代碼爲谷歌距離矩陣

回答

相關問題