Google Maps API：initMap（）不是一个函数 [英] Google Maps API: initMap() is not a function

查看：112 发布时间：2018/5/11 20:29:05 javascript jquery ajax google-maps

本文介绍了Google Maps API：initMap（）不是一个函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  $（document）.ready（function（）{ 
 var latLon = {
 lat：38.736946，
 lng：-9.142685 
}; 
 var numero = 10; 
 var clicked = 1; 
 $ b $（＃sq）。click（function（）{
 clicked = 1; 
}）; 
 $（＃lg-sq）。click （function（）{
 clicked = 2; 
}）; 
 $（＃thumb）。click（function（）{
 clicked = 3; 
点击（功能（）{
 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'，
数据类型： 'xml'，
 data：{
 api_key：'2fd41b49fedfd589dc265350521ab539'，
标签：$（＃tag）。val（），
格式：'rest'
}，
成功：sucessHandler，
错误：errorHandler 
 
}）; 
 
函数sucessHandler（data）{
 $（＃results）。html（''）; 
 var fotos = Array.prototype.slice.call（$（data）.find（photo））; （$（＃numero）。val（）！=）{
 numero = parseInt（$（＃numero）。val（））; 
 
 if 
 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'），
格式：'rest'
}，
成功：function（dataSize）{$ b $ （'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'），
格式：'rest'，
 secret：secret 
}，
 for（var i = 1; i <6; i ++）{
 if（clicked == i）{
 var size = dataSize.getElementsByTagName（'size'）[i  -  1]; 
 var title = dataInfo.getElementsByTagNam E（标题）[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 ='图标。 png'width = 50 height = 50 /> + 
< p>< b>título：< / b> ;:+ title +< / p> +< p>< b> autor：< / b> +所有者+< / p> +< p>< b> data：< / b> + date +< / p> +< p>< b>本地：< / b> + local +< / br>< / br> 
 
 for（var i = 0; i< tags.length; i ++）{
 htmlText + =< label style ='border：1px solid gray; 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>）; * / 
 
 
 
 $ b} 
错误：函数（req，status，err）{
 
 
}）; 
 
}，
错误：errorSize 
 
}）; 
} 
}）; 
 
函数errorSize（req，status，err）{
 console.log（error size）; 
 
 
 
 $ b函数errorHandler（req，status，err）{
 console.log（fail）; 
} 
}）; 
 
 
 var map; 
 
函数initMap（）{
 map = new google.maps.Map（
 document.getElementById（'map'），{$ b $ center：latLon，
 zoom：8 
} 
）; 
} 
 
}）;

html

 < html lang =en> 
 
< head> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.jstype =text / javascript>< / script> 
< script type =text / javascriptsrc =FlickrPhotosSearch.js>< / script> 
< link rel =stylesheettype =text / csshref =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％
} 
 
输入{
 width：50px; 
} 
 
 #map {
 width：1240; 
身高：300; 
} 
< / style> 
< / head> 
 
< body> 
< div class =container> 
< div class =row> 
< div class =col-md-12> 
< h2> Escolha o tamanho das imagens（empíxeis）que quer visualizar< / h2> 
< / div> 
< / div> 
< div class =row> 
< div class =col-md-2> 
< button type =buttonclass =btn btn-primaryid =sq> Square [75X75]< / button> 
< / div> 
< div class =col-md-2> 
< button type =buttonclass =btn btn-primaryid =lg-sq>大方形< / button> 
< / div> 
< div class =col-md-2> 
< button type =buttonclass =btn btn-primaryid =thumb>缩略图< / button> 
< / div> 
< div class =col-md-2> 
< button type =buttonclass =btn btn-primaryid =small>小< / button> 
< / div> 
< div class =col-md-2> 
< button type =buttonclass =btn btn-primaryid =mid>中< / button> 
< / div> 
< / div> 
< div class =row> 
< div class =col-md-12> 
< h2>照片照片< / h2> 
< / div> 
< / div> 
< div class =row> 
< div class =col-lg-2> 
< input type =textclass =form-controlid =tag> 
< / div> 
< div class =col-lg-1> 
< button type =buttonclass =btn btn-successid =pesquisar> Pesquisar< / button> 
< / div> 
< div class =col-lg-1> 
< button type =buttonclass =btn btn-alertid =apagar> Apagar< / button> 
< / div> 
< div class =col-lg-2> 
< input type =textid =numeroclass =form-controlplaceholder =numero de fotos> 
< / div> 
< / div> 
 
< hr> 
< div id =map>< / div> 
 
< div class =rowid =resultsstyle =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=initMapasync defer>< / script> 
< / body> 
 
< / html>

第二个脚本

  $（document.ready（function（）{
 var map; 
 var latLon = {lat：38.736946，lng：-9.142685}; 
函数initMap（）{
 map = new google.maps.Map（
 document.getElementById（'map'），
 {
 center：latLon，
 zoom ：8 
} 
）; 
} 
}）;

我将一个调用编码到底部的 initMap 函数，但是当我尝试调用它时，出现错误：

initMap 不是函数

我需要使这个函数可用，所以我可以用前面描述的数据做另一个AJAX调用。我该怎么做？ 解决方案

您需要在 $（document）.ready（） initMap（） >功能。这个我初始化谷歌地图的方法要求全局访问 initMap 。
initMap（）必须位于< script> 标签内的任何其他函数之外。 / p>

  $（document）.ready（function（）{
 //所有其他东西
}） ; 
 
 var map; 
 var latLon = {lat：38.736946，lng：-9.142685}; 
函数initMap（）{
 map = new google.maps.Map（
 document.getElementById（'map'），
 {
 center：latLon，
 zoom：8 
} 
）; 
}

I'm working with Flickr's API. I am asynchronously loading some images and related metadata. I have a script where I do all this, using three AJAX calls:

$(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>

second script

$(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
            }
        );
    }
});

I coded a call to an initMap function on the bottom, but when I try to invoke it, I get the error:

initMap is not a function

I need to make this function available so I can make another AJAX call with the previously-described data. How can I do that?

解决方案

You need to move initMap() function outside the $(document).ready() function. This method of initializing google maps requires that initMap is accessible globally. initMap() has to be outside any other function, right inside <script> tag.

$(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
        }
   );
}

这篇关于Google Maps API：initMap（）不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Google Maps API：initMap（）不是一个函数 [英] Google Maps API: initMap() is not a function

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Google Maps API：initMap（）不是一个函数 [英] Google Maps API: initMap() is not a function

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭