Question

这是功能：

function initializeMap(){
        var LatLng = {lat: 20.23, lng: -8.28460};
        var mapOptions = {
            center: LatLng,
            zoom: 6,
            scrollwheel:false
        }

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

        var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                draggable: true,
                title: "Binko"
        });

        var input = document.getElementById('accommodation_address');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds',map);

        google.maps.event.addListener(autocomplete, 'place_changed',function(){
            var place=autocomplete.getPlace();
            if (!place.geometry){
                return;
            }
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }

            marker.setPlace( ({
                placeId: place.place_id,
                location: place.geometry.location
            }));
        });
    };

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

我收到未捕获的类型错误，说未定义自动完成，即使我包含了库。我的API调用如下所示： SRC = “https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places” ＆GT;

Answer 1

我遇到过类似的问题。谷歌地图和自动填充功能已经在我的旧网站和本地主机上运行，但在新网站上却没有。我必须创建api密钥并将其包含在代码中：

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

然后我在开发者控制台（我有api键）中启用了额外的api。步骤进行：

选择您的项目
单击Overview
找到Google Places API网络服务（您可以在搜索框中输入或在Google Maps API之间找到它）
点击Google Places API网络服务
点击启用按钮

Answer 2

尝试这样做：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initializeMap" async defer></script>

而不是

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

可能没有加载Places库

Answer 3

嗯，我的代码没问题：

<!DOCTYPE html>
<htm>
<head>
    <title>
    Map
    </title>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en" ></script>
    <script>
    function initializeMap(){
        var LatLng = {lat: 20.23, lng: -8.28460};
        var mapOptions = {
            center: LatLng,
            zoom: 6,
            scrollwheel:false,
            noClear: true
        }

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

        var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                draggable: true,
                title: "Binko"
        });

        var input = document.getElementById('accommodation_address');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds',map);

        google.maps.event.addListener(autocomplete, 'place_changed',function(){
            var place=autocomplete.getPlace();
            if (!place.geometry){
                return;
            }
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }

            marker.setPlace( ({
                placeId: place.place_id,
                location: place.geometry.location
            }));
        });
    };

    google.maps.event.addDomListener(window, 'load', initializeMap);
    </script>
    <style type="text/css">
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #accommodation_address {
      width: 20%;
      position: absolute;
      left: 10%;
      top: 10%;
      background-color: white;
      border: 1px solid gray;
      z-index: 100;
    }
    </style>
</head>
<body>
<div id="map">
  <input type="text" id="accommodation_address" />
</div>
</body></html>

Answer 4

我启用了 API 密钥，但我缺少的是 API 密钥包含中的 &libraries=places。记录：

https://developers.google.com/maps/documentation/javascript/places

Google地图自动填充功能因某些原因无法使用

4 个答案: