无法读取 属性 'Autocomplete' of undefined using webpack with load-google-maps-api-2

Question

我正在尝试使用地图 javascript api 放置自动完成设置自动完成，但我一直收到。

Uncaught (in promise) TypeError: Cannot read property 'Autocomplete' of undefined

index.js

var loadGoogleMapsApi = require('load-google-maps-api-2');
const indexTemplate = require("./index.handlebars");

    $(function() {

        let googleMaps = null;

        loadGoogleMapsApi({
            key: 'My api key here'
        }).then(function(_googleMaps) {
            googleMaps = _googleMaps
            var autocomplete = new googleMaps.places.Autocomplete($("#address")[0]);

                googleMaps.event.addListener(autocomplete, 'place_changed', function() {
                    var place = autocomplete.getPlace();
                    console.log(place.address_components);
            });
        });

完整列表在这里。

https://github.com/bryandellinger/addressvalidator

如果你想 运行 下载后 npm 安装 npm 运行 build（做一个 webpack 构建） npm 运行 start（启动精简版服务器并在端口 3000 上打开浏览器）

Answer 1

您需要加载places库；根据 documentation:

loadGoogleMapsApi({
    libraries: ['places'],
    key: '...'
})
.then(function (googleMaps) {
  ...
})
.catch(function (error) {
    ...
});

Answer 2

我遇到了同样的问题，但是当我将 class“pac-input”添加到我的 标签时，它开始工作了。