我正在使用 ASP.Net Web 应用程序，并且尝试在我的网站中查看 google map ，但无论我在何处运行该网站，都会收到此错误:
This page was unable to display a google maps element.the provider google API key is invalid or this site is not authorized to use it . error code : InvalidKeyOrUnauthorizedURLmapError
源代码:
!DOCTYPE html>
<html>
<head>
<link href="../assets/styles.min.css" rel="stylesheet">
<title>Google Maps: Latitude-Longitude Finder Tool</title>
<style>
#map-search { position: absolute; top: 10px; left: 10px; right: 10px; }
#search-txt { float: left; width: 60%; }
#search-btn { float: left; width: 19%; }
#detect-btn { float: right; width: 19%; }
#map-canvas { position: absolute; top: 40px; bottom: 65px; left: 10px; right: 10px; }
#map-output { position: absolute; bottom: 10px; left: 10px; right: 10px; }
#map-output a { float: right; }
</style>
</head>
<body>
<div id="map-search">
<input id="search-txt" type="text" value="Disneyland, 1313 S Harbor Blvd, Anaheim, CA 92802, USA" maxlength="100">
<input id="search-btn" type="button" value="Locate Address">
<input id="detect-btn" type="button" value="Detect Location" disabled>
</div>
<div id="map-canvas"></div>
<div id="map-output"></div>
<script type="text/javascript">
/*
* Google Maps: Latitude-Longitude Finder Tool
* http://salman-w.blogspot.com/2009/03/latitude-longitude-finder-tool.html
*/
function loadmap() {
// initialize map
var map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(33.808678, -117.918921),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// initialize marker
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable: true,
map: map
});
// intercept map and marker movements
google.maps.event.addListener(map, "idle", function() {
marker.setPosition(map.getCenter());
document.getElementById("map-output").innerHTML = "Latitude: " + map.getCenter().lat().toFixed(6) + "<br>Longitude: " + map.getCenter().lng().toFixed(6) + "<a href='https://www.google.com/maps?q=" + encodeURIComponent(map.getCenter().toUrlValue()) + "' target='_blank'>Go to maps.google.com</a>";
});
google.maps.event.addListener(marker, "dragend", function(mapEvent) {
map.panTo(mapEvent.latLng);
});
// initialize geocoder
var geocoder = new google.maps.Geocoder();
google.maps.event.addDomListener(document.getElementById("search-btn"), "click", function() {
geocoder.geocode({ address: document.getElementById("search-txt").value }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var result = results[0];
document.getElementById("search-txt").value = result.formatted_address;
if (result.geometry.viewport) {
map.fitBounds(result.geometry.viewport);
} else {
map.setCenter(result.geometry.location);
}
} else if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
alert("Sorry, geocoder API failed to locate the address.");
} else {
alert("Sorry, geocoder API failed with an error.");
}
});
});
google.maps.event.addDomListener(document.getElementById("search-txt"), "keydown", function(domEvent) {
if (domEvent.which === 13 || domEvent.keyCode === 13) {
google.maps.event.trigger(document.getElementById("search-btn"), "click");
}
});
// initialize geolocation
if (navigator.geolocation) {
google.maps.event.addDomListener(document.getElementById("detect-btn"), "click", function() {
navigator.geolocation.getCurrentPosition(function(position) {
map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
}, function() {
alert("Sorry, geolocation API failed to detect your location.");
});
});
document.getElementById("detect-btn").disabled = false;
}
}
</script>
<script src="//maps.googleapis.com/maps/api/js?v=3&sensor=false&key=AIzaSyBs1MVxS8kIxL9BXrxYE0lfvDP-iF_cmeA&callback=loadmap" defer></script>
</body>
</html>
最佳答案
此错误通常是由于关键参数无效或此站点无权使用它而发生的。在您的情况下，这很可能是第二个原因，因为您正在尝试重用其他资源中的现有 key 。
基本上你有两个选择:
选项 1
省略关键参数，因此替换行:
<script src="//maps.googleapis.com/maps/api/js?v=3&sensor=false&key=AIzaSyBs1MVxS8kIxL9BXrxYE0lfvDP-iF_cmeA&callback=loadmap" defer></script>
与
<script src="//maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=loadmap" defer></script>
选项 2
Acquire a new key并用新的替换现有的。
关于javascript - 无法使用 Asp.Net 查看 Google map ，错误为 :InvalidKeyOrUnauthorizedURLmapError，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32417916/