Question

我有一段代码昨天晚上工作得很好，地方图书馆处理谷歌地图自动完成，但今天早上，我完全无法使它工作。

我收到以下错误：

Cannot read property 'Autocomplete' of undefined

产生错误的行

var searchBox = new google.maps.places.Autocomplete($("#searchBox")[0], {
    types: ['(regions)'],
    componentRestrictions: {country: "fr"}
});

在脚本

之前加载库

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&sensor=true"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

完整代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>ImmoGéo</title>
    <link rel="stylesheet" href="style.css" />
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
</head>
<body>
    <div id="share" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title">Partager</h4>
                </div>
                <div class="modal-body">
                    <input type="text" id="share-url" class="form-control"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div id='panel'>
        <div id="title">RECHERCHE</div>
        <div id="content">
             <div id="search" class="input-group">
                <input type="text" autocomplete="off" id="searchBox" class="form-control" placeholder="Recherche"/><span style="cursor: pointer;" data-toggle="modal" data-target="#share" class="input-group-addon"><img src="img/share.png" height="20px"/></span>
            </div>
            <div class="btn-group btn-group-justified">
                <a class="btn btn-info" >ACHETER</a>
                <a class="btn btn-info" >LOUER</a>
            </div>
            <div id="criteria">

            </div>
        </div>

    </div>
    <div id='map-canvas'></div>
</body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&sensor=true"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script type='text/javascript'>

    function togglePanel()
    {
        if($("#panel").css("right") == "-400px"){
            $("#panel").animate({"right": "0px"}, 800, 'easeInOutQuart', function(){
                $("#searchBox").focus();
            });
        }
        else {
            $(".pac-container").hide();
            $("#panel").animate({"right": "-400px"}, 800, 'easeInOutQuart');
        }


    }

    function init()
    {
        //set title style
        $("#title").css("width", 3*(($(window).width())/100)); //width button 3%
        $("#title").css("left", "-"+3*(($(window).width())/100)+"px"); //left -3%

        $("#title").click(function(){
           togglePanel();
        });

        //add listeners on #actions

        //LOCATING USER
        userPosition = new Object();
        userPosition.latitude = 48.85;
        userPosition.longitude = 2.4;

        if (navigator.geolocation)
        {
            navigator.geolocation.watchPosition(
                function (pos){
                    if(userPosition.latitude != pos.coords.latitude || userPosition.longitude != pos.coords.longitude)
                    {
                        userPosition.latitude = pos.coords.latitude;
                        userPosition.longitude = pos.coords.longitude;
                        pos = new google.maps.LatLng(userPosition.latitude, userPosition.longitude);
                        map.panTo(pos);
                    }
                },
                null,
                {enableHighAccuracy:true}
            );            
        }
        else
            alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");

        //MAP OPTIONS
        map = new google.maps.Map(document.getElementById("map-canvas"),{
            center: new google.maps.LatLng(userPosition.latitude, userPosition.longitude),
            streetViewControl: false,
            zoom: 12,
            mapTypeControl: true
        });

        //SEARCHBOX
        var searchBox = new google.maps.places.Autocomplete($("#searchBox")[0], {
            types: ['(regions)'],
            componentRestrictions: {country: "fr"}
        });

        google.maps.event.addListener(searchBox, 'place_changed', function() {
            var place = searchBox.getPlace();
            if(typeof searchMarker !== 'undefined')
                searchMarker.setMap(null);

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(13);  // Why 13? Because it looks good.
            }
            //create markers for each results
            searchMarker = new google.maps.Marker({
                map: map,
                title: place.name,
                position: place.geometry.location
            });
        });
    }

    $(document).load(init());

</script>

谷歌是否有可能为我的推荐人禁用API？我做错了吗？

Answer 1

您正在加载Google API两次：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places&sensor=true"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

您必须将这两个链接合并为：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places&sensor=true"></script>

此外，其他一些链接在开头时缺少http:。检查控制台日志中的错误消息。

Answer 2

尝试设置sensor = false，如：

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places&sensor=false"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

我遇到了类似的问题，自动完成功能在今天早上停止工作，没有任何变化。我跟踪了这个变化，它再次起作用。

Answer 3

在没有传感器参数的情况下使用它

https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places"></script>

Answer 4

在其他地方找到了一个解决方案，建议在加载Google地方信息库时在请求中分离查询，请参见以下示例：

<network-security-config>
   <base-config cleartextTrafficPermitted="true">
       <trust-anchors>
           <certificates src="system" />
       </trust-anchors>
   </base-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain>localhost</domain>
        <domain includeSubdomains="true">192.168.7.213:8733</domain>
    </domain-config>
</network-security-config>

这对我使用Cordova很有用；

链接：https://forum.ionicframework.com/t/google-places-results-not-showing-on-mobile-solved/107210

Google Places API未加载

4 个答案: