javascript - Uncaught ReferenceError : google is not defined

Question

我看到了十几个具有相同标题和问题的问题。在解决了所有这些问题并对代码进行了更改之后，我无法解决这个问题。

我的谷歌地图工作正常。但是在控制台中，显示了这个错误。谁能帮我解决这个问题。

我在 head 标签内指定了 JavaScript 代码

 <script>
    function loadScript()
    {
    var myKey = "__API-Key__";
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key="+myKey+"&sensor=false&callback=initialize";
    document.body.appendChild(script);
    }
    window.onload = loadScript;
    </script>

    <script>

        function initialize()
        {
            var laa=-34.397;
            var lonn= 150.644;
            var mapOptions =
            {
                zoom: 7,
                center: new google.maps.LatLng(laa, lonn),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                maxZoom: 8,
                minZoom:2
            };

            var map = new google.maps.Map(document.getElementById('location-canvas'),
                mapOptions);

            var marker = new google.maps.Marker({
                map: map,
                draggable: false,
                position: new google.maps.LatLng(laa, lonn)
            });

            function bind(eventName)
            {
                google.maps.event.addListener(map, eventName, function ()
                {
                    common();

                });
            }

            bind('zoom_changed');
            bind('center_changed');
            bind('tilesloaded');
            bind('idle');

            function common()
            {
                var bounds = map.getBounds();
                var southWest = bounds.getSouthWest();
                var northEast = bounds.getNorthEast();
                var getcentre=bounds.getCenter();
                var ne = map.getBounds().getNorthEast();
                var sw = map.getBounds().getSouthWest();
                var zoom=map.getZoom();
                var centre_lat=getcentre.lat();
                var centre_long=getcentre.lng();
                var myLatlng=new google.maps.LatLng(centre_lat,centre_long);
                var mapProp =
                {
                    center: new google.maps.LatLng(centre_lat,centre_long),
                    zoom:zoom,
                    maxZoom: 8,
                    minZoom:2,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

            }
        }

        google.maps.event.addDomListener(window, 'resize', initialize);
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

Inside Body 标签:

            <div id='location-canvas' style='width:100%;height:500px;'>

            </div>

Answer 1

你不需要包括以下两行，因为你已经用 http://maps.googleapis.com/maps/api/js?key="+myKey+"&sensor=false&callback=initialize 定义了一个回调函数。

所以要么使用

<script src="http://maps.googleapis.com/maps/api/js?key="+__API-Key__+"&sensor=false" type="text/javascript"></script>

不用函数调用，直接放在document上

或移除

   google.maps.event.addDomListener(window, 'resize', initialize);
   google.maps.event.addDomListener(window, 'load', initialize);

例如:

<script src="http://maps.googleapis.com/maps/api/js?key="+__API-Key__+"&sensor=false"></script>

<script>

    function initialize()
    {
        var laa=-34.397;
        var lonn= 150.644;
        var mapOptions =
        {
            zoom: 7,
            center: new google.maps.LatLng(laa, lonn),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            maxZoom: 8,
            minZoom:2
        };

        var map = new google.maps.Map(document.getElementById('location-canvas'),
            mapOptions);

        var marker = new google.maps.Marker({
            map: map,
            draggable: false,
            position: new google.maps.LatLng(laa, lonn)
        });

        function bind(eventName)
        {
            google.maps.event.addListener(map, eventName, function ()
            {
                common();

            });
        }

        bind('zoom_changed');
        bind('center_changed');
        bind('tilesloaded');
        bind('idle');

        function common()
        {
            var bounds = map.getBounds();
            var southWest = bounds.getSouthWest();
            var northEast = bounds.getNorthEast();
            var getcentre=bounds.getCenter();
            var ne = map.getBounds().getNorthEast();
            var sw = map.getBounds().getSouthWest();
            var zoom=map.getZoom();
            var centre_lat=getcentre.lat();
            var centre_long=getcentre.lng();
            var myLatlng=new google.maps.LatLng(centre_lat,centre_long);
            var mapProp =
            {
                center: new google.maps.LatLng(centre_lat,centre_long),
                zoom:zoom,
                maxZoom: 8,
                minZoom:2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

        }
    }

    google.maps.event.addDomListener(window, 'resize', initialize);
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

        <div id='location-canvas' style='width:100%;height:500px;'>

        </div>

这应该可以正常工作。