无法使用 Asp.Net 查看 Google 地图，出现错误：InvalidKeyOrUnauthorizedURLmapError
Posted
技术标签:
【中文标题】无法使用 Asp.Net 查看 Google 地图，出现错误：InvalidKeyOrUnauthorizedURLmapError【英文标题】：Can't view Google Maps using Asp.Net with error :InvalidKeyOrUnauthorizedURLmapError 【发布时间】：2015-12-01 18:49:39 【问题描述】：我正在使用 ASP.Net 网络应用程序，我正在尝试在我的网站中查看谷歌地图，但无论我在哪里运行网站，我都会收到此错误：
此页面无法显示谷歌地图元素。提供者 google API key 无效或本站无权使用。 错误代码：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>
【问题讨论】：
这个错误似乎不言自明。您是否确定在从设置 api 密钥的域提供的页面上显示地图？ Google 员工将检查引荐网址并验证密钥对该域是否有效 @Basic 这是我第一次使用 Google 地图，我在 console.developers.google.com 中设置了一个新密钥，即浏览器 API 密钥：AIzaSyA51e4TY9Z9iD-ei8ybFDwtNK0BF8W7izI 但仍然无法使用！我应该如何以正确的方式做到这一点？请告诉我 很高兴你能成功 【参考方案1】：这个错误通常是因为key参数是无效或者这个网站没有被授权使用它。在您的情况下，这很可能是第二个原因，因为您试图重用另一个资源中的现有密钥。
基本上你有两个选择：
选项 1
省略key参数，所以替换行：
<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 并用新的替换现有的。
【讨论】：
以上是关于无法使用 Asp.Net 查看 Google 地图，出现错误：InvalidKeyOrUnauthorizedURLmapError的主要内容，如果未能解决你的问题，请参考以下文章
asp.net mvc 中的 Google 身份验证 - 无法获取用于 Google 登录的 redirectUrl
asp.net 调用百度地图API，在JS里面会出现无法加载未定义或null引用的属性“addOverlay”该怎么解决？
使用asp.net mvc在按钮单击成功时查看包消息无法正常工作？