VueJS Web 应用程序中的 Google Maps API 弃用错误：utc_offset 自 2019 年 11 月起弃用，并将于 2020 年 11 月关闭答案

【问题标题】：Google Maps API Deprecation Error in VueJS web app: utc_offset is deprecated as of November 2019 and will be turned off in November 2020VueJS Web 应用程序中的 Google Maps API 弃用错误：utc_offset 自 2019 年 11 月起弃用，并将于 2020 年 11 月关闭
【发布时间】：2020-04-30 04:16:55
【问题描述】：

我目前在我的 VueJS Web 应用程序中收到以下错误。

utc_offset 自 2019 年 11 月起已弃用，并将在 2020 年 11 月。请改用 utc_offset_minutes。

根据Google Maps API documentation：

Places 字段 opening_hours.open_now 和 utc_offset 已弃用自 2019 年 11 月 20 日起，将于 2020 年 11 月 20 日关闭。这些字段仅在 Places Library、Maps 中被弃用 JavaScript API。本指南向您展示如何更新代码以停止使用这些字段。

唯一的问题是，我绝对不直接在我的 Vue 应用程序中的任何地方使用 utc_offset。我通过在我的应用程序中对单词“utc_offset”进行全局查找来验证这一点。我也不记得访问过那个特定的属性。

如果我没有使用该属性，为什么会收到此弃用警告？

下面是我的堆栈跟踪的样子：

以下代码 sn-p 显示了clearAllCardsAndFilters 方法的作用。

methods: {
    clearAllCardsAndFilters() {
        this.clearActiveCardListingId();
        this.clearFilterCards();
    },
    clearActiveCardListingId() {
        this.$store.commit('clearActiveCardListingId');
    },

以下代码 sn-p 显示了 Vuex 中的 clearActiveCardListingId 突变的作用。它只是将 Vuex 中的 activeCardListingId 属性设置为 null。

    clearActiveCardListingId(state) {
        state.activeCardListingId = null;
    },

【问题讨论】：

也许如果您请求地点详细信息而不指定任何 fields，这将返回所有字段（由于计费，您应该避免使用这些字段）。没有看到您的代码，无论如何都无法说出，所以我会投票结束您的问题...

标签： javascript google-maps vue.js google-maps-api-3 vuex

【解决方案1】：

如果您使用的是 VUE2-google-maps，那么您可以通过以下方式使用谷歌地图组件：

<GmapAutocomplete
 @place_changed="setPlace"
 :options="{fields: ['geometry', 'formatted_address', 'address_components']}">
</GmapAutocomplete>

【讨论】：

【解决方案2】：

我在使用 Google Places API 时未指定任何字段。一旦您以下列方式指定字段，此弃用警告就会消失。确保避免将“utc_offset”指定为字段，否则消息将返回。

new google.maps.places.PlacesService(attrContainer).getDetails({
  placeId: '...',
  fields: ['opening_hours','utc_offset_minutes'],
  }, function (place, status) {
    if (status !== 'OK') return; // something went wrong
    const isOpenAtTime = place.opening_hours.isOpen(new Date('December 17, 2020 03:24:00'));
    if (isOpenAtTime) {
        // We know it's open.
    }

    const isOpenNow = place.opening_hours.isOpen();
    if (isOpenNow) {
        // We know it's open.
    }
});

【讨论】：

【解决方案3】：

没有 :options

它对我有用

:fields="['geometry', 'opening_hours', 'business_status']"

【讨论】：