在哪里输入密钥代码为谷歌距离矩阵

我已经创建了几个使用谷歌距离的网页。我为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

在哪里输入密钥代码为谷歌距离矩阵

回答

相关问题