我遇到了在JS Fiddle中显示地图的问题。就是这个例子:
https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints
我通过粘贴到一个空白的html文档中使用了我的api密钥,但是当我将完整的JavaScript + HTML粘贴到JS Fiddle中时(所有这些都进入了HTML字段,不是理想的格式,但它应该仍然有效,对吧?)它给出了控制台错误“Google Maps API错误:RefererNotAllowedMapError。”
我尝试将https://maps.googleapis.com/maps/api/js粘贴到外部资源中,但这并未改变任何内容。
如果我确实添加了外部资源,我还需要
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
HTML中的还是我可以摆脱它?
感谢您提供有关在JS Fiddle中使用此功能的任何提示!
答案 0 :(得分:1)
您获得的error:Google Maps API error: RefererNotAllowedMapError.
表示您没有该域的有效密钥。
RefererNotAllowedMapError错误
加载Google Maps JavaScript API的当前网址尚未添加到允许的引荐来源列表中。请在Google Developers Console上查看API密钥的引荐来源设置。
请参阅Google Developers Console中的API密钥。有关详细信息,请参阅安全使用API密钥的最佳做法。
最简单的修复(特别是对于您不喜欢jsfiddle.net的网站)是从网址中删除key=YOUR_API_KEY&
(这不是有效密钥,而密钥不是必需,推荐)。
代码段
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {
lat: 41.85,
lng: -87.65
}
});
directionsDisplay.setMap(map);
document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected) {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
}
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions-panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
'</b><br>';
summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
&#13;
#right-panel {
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select,
#right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
float: left;
width: 70%;
height: 100%;
}
#right-panel {
margin: 20px;
border-width: 2px;
width: 20%;
float: left;
text-align: left;
padding-top: 20px;
}
#directions-panel {
margin-top: 20px;
background-color: #FFEE77;
padding: 10px;
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<select id="start">
<option value="Halifax, NS">Halifax, NS</option>
<option value="Boston, MA">Boston, MA</option>
<option value="New York, NY">New York, NY</option>
<option value="Miami, FL">Miami, FL</option>
</select>
<br>
<b>Waypoints:</b>
<br>
<i>(Ctrl-Click for multiple selection)</i>
<br>
<select multiple id="waypoints">
<option value="montreal, quebec">Montreal, QBC</option>
<option value="toronto, ont">Toronto, ONT</option>
<option value="chicago, il">Chicago</option>
<option value="winnipeg, mb">Winnipeg</option>
<option value="fargo, nd">Fargo</option>
<option value="calgary, ab">Calgary</option>
<option value="spokane, wa">Spokane</option>
</select>
<br>
<b>End:</b>
<select id="end">
<option value="Vancouver, BC">Vancouver, BC</option>
<option value="Seattle, WA">Seattle, WA</option>
<option value="San Francisco, CA">San Francisco, CA</option>
<option value="Los Angeles, CA">Los Angeles, CA</option>
</select>
<br>
<input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
&#13;