javascript - 谷歌地图 API : initMap() is not a function

Question

我正在使用 Flickr 的 API。我正在异步加载一些图像和相关元数据。我有一个脚本，使用三个 AJAX 调用来完成所有这些操作:

$(document).ready(function() {
    var latLon = {
        lat: 38.736946,
        lng: -9.142685
    };
    var numero = 10;
    var clicked = 1;

    $("#sq").click(function() {
        clicked = 1;
    });
    $("#lg-sq").click(function() {
        clicked = 2;
    });
    $("#thumb").click(function() {
        clicked = 3;
    });
    $("#small").click(function() {
        clicked = 4;
    });
    $("#mid").click(function() {
        clicked = 5;
    });

    $("#apagar").click(function() {
        $("#results").html('');
    });

    $('#pesquisar').click(function() {
        $("#results").html('');
        $.ajax({
            url: 'https://api.flickr.com/services/rest/?method=flickr.photos.search',
            dataType: 'xml',
            data: {
                api_key: '2fd41b49fedfd589dc265350521ab539',
                tags: $("#tag").val(),
                format: 'rest'
            },
            success: sucessHandler,
            error: errorHandler

        });

        function sucessHandler(data) {
            $("#results").html('');
            var fotos = Array.prototype.slice.call($(data).find("photo"));

            if ($("#numero").val() != "") {
                numero = parseInt($("#numero").val());
                console.log("entrou");
            }

            fotos.forEach(function(foto, key) {
                if (key < numero) {
                    $.ajax({
                        url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes',
                        dataType: 'xml',
                        data: {
                            api_key: '2fd41b49fedfd589dc265350521ab539',
                            photo_id: $(foto).attr('id'),
                            format: 'rest'
                        },
                        success: function(dataSize) {
                            var farmId = $(foto).attr('farm');
                            var serverId = $(foto).attr('server');
                            var Id = $(foto).attr('id');
                            var secret = $(foto).attr('secret');
                            var src = "https://farm" + farmId + ".staticflickr.com/" + serverId + "/" + Id + "_" + secret + ".jpg";

                            $.ajax({
                                url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getInfo',
                                dataType: 'xml',
                                data: {
                                    api_key: '2fd41b49fedfd589dc265350521ab539',
                                    photo_id: $(foto).attr('id'),
                                    format: 'rest',
                                    secret: secret
                                },
                                success: function(dataInfo) {

                                    for (var i = 1; i < 6; i++) {
                                        if (clicked == i) {
                                            var size = dataSize.getElementsByTagName('size')[i - 1];
                                            var title = dataInfo.getElementsByTagName('title')[0].textContent;
                                            var owner = $(dataInfo.getElementsByTagName('owner')[0]).attr('username');
                                            var date = $(dataInfo.getElementsByTagName('dates')[0]).attr('taken');
                                            var local = $(dataInfo.getElementsByTagName('owner')[0]).attr('location');
                                            if (local == "") {
                                                local = "desconhecido";
                                            }
                                            var tags = $(dataInfo.getElementsByTagName('tag'));
                                            var allTags = "";
                                            var width = $(size).attr("width");
                                            var height = $(size).attr("height");
                                            var htmlText = "<div class='col-md-12 jumbotron style='display:inline-block;vertical-align:text-top'><p hidden>" + Id + "</p><img src =" + src + " width=" + width + " height=" + height + "><img class='pull-right' src='icon.png' width=50 height=50/>" +
                                                "<p><b>título:  </b>:" + title + "</p>" + "<p><b>autor:  </b>" + owner + "</p>" + "<p><b>data:  </b>" + date + "</p>" + "<p><b>local:  </b>" + local + "</br></br>"

                                            for (var i = 0; i < tags.length; i++) {
                                                htmlText += "<label style='border:1px solid grey;margin-left:10px'>" + $(tags[i]).attr('raw') + "</label>";
                                            }

                                            htmlText += "</div>";
                                            $('#results').append(htmlText);




                                            /*$('#results').append("<div class='col-md-4'><img src ="+src+" width="+width+" height="+height+">");
                                            $('#results').append("<p><b>título:  </b>:" + title + "</p>" + "<p><b>autor:  </b>" + owner + "</p>" + "<p><b>data:  </b>" + date + "</p>" + "<p><b>local:  </b>" + local);
                                            $('#results').append("</br>");*/

                                        }

                                    }
                                },
                                error: function(req, status, err) {

                                }
                            });

                        },
                        error: errorSize

                    });
                }
            });

            function errorSize(req, status, err) {
                console.log("error size");
            }

        }

        function errorHandler(req, status, err) {
            console.log("fail");
        }
    });


    var map;

    function initMap() {
        map = new google.maps.Map(
            document.getElementById('map'), {
                center: latLon,
                zoom: 8
            }
        );
    }

});

html

<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="FlickrPhotosSearch.js"></script>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
        #sq,
        #lg-sq,
        #thumb,
        #small,
        #mid,
        #ori {
            width: 100%
        }

        input {
            width: 50px;
        }

        #map{
            width:1240;
            height:300;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>Escolha o tamanho das imagens (em píxeis) que quer visualizar</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="sq">Square [75X75]</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="lg-sq">Large Square</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="thumb">Thumbnail</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="small">Small</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="mid">Medium</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h2>Pesquisa de fotos</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2">
                <input type="text" class="form-control" id="tag">
            </div>
            <div class="col-lg-1">
                <button type="button" class="btn btn-success" id="pesquisar">Pesquisar</button>
            </div>
            <div class="col-lg-1">
                <button type="button" class="btn btn-alert" id="apagar">Apagar</button>
            </div>
            <div class="col-lg-2">
                <input type="text" id="numero" class="form-control" placeholder="numero de fotos">
            </div>
        </div>

        <hr>
        <div id="map"></div>

        <div class="row" id="results" style="margin-top:100px;margin-left:50px">

        </div>
    </div>
    <script src="googleapi.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKKKmlp2uHM78D9NMhhzY-lVQmzI81Z_E&callback=initMap" async defer></script>
</body>

</html>

第二个脚本

$(document.ready(function(){
var map;
    var latLon = {lat:38.736946,lng:-9.142685};
    function initMap() {
        map = new google.maps.Map(
            document.getElementById('map'),
            {
                center: latLon,
                zoom: 8
            }
        );
    }
});

我在底部编写了对 initMap 函数的调用，但是当我尝试调用它时，出现错误:

initMap is not a function

我需要使此函数可用，以便我可以使用前面描述的数据进行另一个 AJAX 调用。我怎样才能做到这一点？

Answer 1

您需要搬家initMap() $(document).ready() 之外的函数功能。这种初始化谷歌地图的方法需要 initMap可以在全局范围内访问。 initMap()必须位于任何其他函数之外，就在 <script> 内部标签。

$(document).ready(function() {
    // all your other stuff
});

var map;
var latLon = {lat:38.736946,lng:-9.142685};
function initMap() {
    map = new google.maps.Map(
        document.getElementById('map'),
        {
            center: latLon,
            zoom: 8
        }
   );
}