问题描述
我在让地图显示在JS Fiddle中时遇到问题.就是这个例子:
I am having an issue with getting a map to display in JS Fiddle. It's this example:
https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints
我通过粘贴到空白html文档中来使代码与我的api键一起工作，但是当我将完整的JavaScript + HTML粘贴到JS Fiddle中时(全部粘贴到HTML字段中，不是理想的格式，但它仍然可以正常工作，对吧?)它会显示控制台错误"Google Maps API错误:RefererNotAllowedMapError."
I got the code working with my api key by pasting into a blank html doc but when I paste the full JavaScript + HTML into JS Fiddle (all into the HTML field, not ideal formatting but it should still work, right?) it gives the console error "Google Maps API error: RefererNotAllowedMapError."
我尝试粘贴 https://maps.googleapis.com/maps/api/js转换为外部资源，但这没有任何改变.
I tried pasting https://maps.googleapis.com/maps/api/js into external resources but that didn't change anything.
如果确实添加了外部资源，我是否仍然需要
If I do have the external resource added, would I still need
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
使用HTML还是可以摆脱它?
in the HTML or can I just get rid of it?
感谢您在JS Fiddle中使用此技巧的任何提示！
Thank you for any tips on getting this to work in JS Fiddle!
推荐答案
错误，您将得到:Google Maps API error: RefererNotAllowedMapError.表示您没有该域的有效密钥.
The error you are getting: Google Maps API error: RefererNotAllowedMapError. means you don't have a valid key for that domain.
当前加载Google Maps JavaScript API的URL尚未添加到允许的引荐来源列表中.请在Google Developers Console上检查API密钥的引荐来源网址设置.
The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google Developers Console.
请参阅Google Developers Console中的API密钥.有关更多信息，请参阅安全使用API密钥的最佳做法.
See API keys in the Google Developers Console. For more information, see Best practices for securely using API keys.
最简单的解决方法(尤其是对于您不喜欢jsfiddle.net的网站)是从URL中删除key=YOUR_API_KEY&(这不是有效的密钥，并且该密钥不是必需的 ，因此推荐).
Simplest fix (particularly for a site you don't own like jsfiddle.net) is to remove the key=YOUR_API_KEY& from the URL (that is not a valid key, and a key is not required, it is recommended).
更新:现在需要密钥. Google有一个适用于jsfiddle的测试密钥:AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk(如果您在其中的示例中单击在JSFiddle中打开"，则填充它)
UPDATE: Keys are now required. Google has a test key that works on jsfiddle: AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk (if you click on "open in JSFiddle" on there examples it is populated)
代码段:
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);#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;
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>这篇关于Google Map未显示在JS小提琴中(RefererNotAllowedMapError)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！