个人中心
gpt4 book ai didi

javascript - 无法使用 Asp.Net 查看 Google map ，出现错误 :InvalidKeyOrUnauthorizedURLmapError

转载 作者：行者123 更新时间：2023-11-29 21:42:04 25 4
gpt4 key购买 nike

我正在使用 ASP.Net 网络应用程序，我正在尝试在我的网站上查看谷歌地图，但无论我在哪里运行该网站，我都会收到此错误:

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&amp;sensor=false&amp;key=AIzaSyBs1MVxS8kIxL9BXrxYE0lfvDP-iF_cmeA&amp;callback=loadmap" defer></script>
</body>
</html>

最佳答案

发生此错误的原因通常是关键参数无效 或此站点无权使用它。在您的情况下，这很可能是第二个原因，因为您正试图重用来自另一个资源的现有 key 。

基本上你有两个选择:

选项 1

省略关键参数，所以替换行:

 <script src="//maps.googleapis.com/maps/api/js?v=3&amp;sensor=false&amp;key=AIzaSyBs1MVxS8kIxL9BXrxYE0lfvDP-iF_cmeA&amp;callback=loadmap" defer></script>

与

<script src="//maps.googleapis.com/maps/api/js?v=3&amp;sensor=false&amp;callback=loadmap" defer></script>

选项 2

Acquire a new key并用新的替换现有的。

关于javascript - 无法使用 Asp.Net 查看 Google map ，出现错误 :InvalidKeyOrUnauthorizedURLmapError，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32417916/

25 4 0
文章推荐： javascript - Backbone View 事件不会触发
文章推荐： android - Maven 构建期间的 Alfresco Android SDK 错误
文章推荐： mysql - 如何通过外键区分后获取字段值
文章推荐： javascript - amCharts:如何优雅地管理来自 dataLoader 的数据不足
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com