谷歌地图无法按预期工作答案

【问题标题】：Google map does not work as expected谷歌地图无法按预期工作
【发布时间】：2016-12-22 12:24:30
【问题描述】：

我正在尝试使用谷歌地图显示用户当前位置，但它显示当前位置 1 秒然后显示

对不起！有些不对劲。此页面未加载 Google 地图正确。有关技术详情，请参阅 JavaScript 控制台。

怎么了？

我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="download/css/core.css">
    <link href='//fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <title>Using GeoLocation API With Google Maps - Demo</title>
</head>
<body>
    <header></header>
    <section class="container">
        <h2>Using GeoLocation API With Google Maps - Demo</h2>
        <section id="wrapper">
            Click the allow button to let the browser find your location.

            <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
            <article></article>
            <script>

                function success(position) {
                    var mapcanvas = document.createElement('div');
                    mapcanvas.id = 'mapcontainer';
                    mapcanvas.style.height = '400px';
                    mapcanvas.style.width = '600px';

                    document.querySelector('article').appendChild(mapcanvas);

                    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                    var options = {
                        zoom: 15,
                        center: coords,
                        mapTypeControl: false,
                        navigationControlOptions: {
                            style: google.maps.NavigationControlStyle.SMALL
                        },
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

                    var marker = new google.maps.Marker({
                        position: coords,
                        map: map,
                        title: "You are here!"
                    });
                }

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(success);
                } else {
                    error('Geo Location is not supported');
                }
            </script>
        </section>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-8196211-5']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>
    </section>
</body>
</html>

【问题讨论】：

浏览器控制台说什么是错误？很可能缺少 API 密钥。
如@Dandy 所说或其他。查看控制台了解更多信息

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

像这样添加密钥：

 <script type="text/javascript" src="//maps.google.com/maps/api/js?Key=MyKey&sensor=true"></script>

您可以从这里创建您的密钥：generate map api key

【讨论】：

我在代码中看到 <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script> - 可能是 OP 删除了密钥？
不，他没有加钥匙！
可能或故意删除不在这里分享？
是的，可能是这样，但如果是这样，那么他可以像我在key=Mykey 上发布的那样发帖
我也尝试使用密钥，但同样的问题！