使用谷歌地图库的 Vue 应用程序在刷新时会丢失库答案

【问题标题】：Vue application using google maps library loses library on refresh使用谷歌地图库的 Vue 应用程序在刷新时会丢失库
【发布时间】：2018-12-25 16:23:04
【问题描述】：

我对 Vue.js 还是很陌生，但我正在构建一个应用程序，它使用了几个自定义组件，这些组件在 Laravel 框架内与 Vuex 共享数据。

包含一些第三方 .js 库，例如 google maps api。

当我进行更改并重建 npm run dev 并加载我的应用程序时，一切正常。

如果我刷新页面，那么我会在我的一个组件中收到有关此行的错误：

let latLng = new google.maps.LatLng(this.latitude, this.longitude);

有google is undefined 所以我猜这个库不会在浏览器刷新时重新加载？

更新：

我在刀片模板中加载 .js 文件：

@extends('layouts.default')

@section('content')

<h1>Search</h1>
<div id="app">

<search-box
    app-id="{{ env('ALGOLIA_APP_ID') }}"
    api-key="{{ env('ALGOLIA_API_KEY') }}"
    index-name="{{ env('SCOUT_PREFIX') . env('ALGOLIA_INDEX_NAME') }}"
></search-box>
</div>



@endsection

@push('scripts')
<script src='https://maps.googleapis.com/maps/api/js?key=key&callback=initmap&libraries=geometry,places' async defer></script>
<script src='/js/markerclusterer.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>
@endpush

```

您可以看到这也加载了包含违规行的搜索框组件：

let latLng = new google.maps.LatLng(this.latitude, this.longitude);

【问题讨论】：

您能否提供一些示例代码，说明您在哪里声明使用 3rd 方库？
可能是它正在加载，但当您的组件尝试渲染时尚未加载。在任何情况下，我们都需要minimal reproducible example 来找出确切的问题，而目前的描述我们只能做出模糊的猜测。
谢谢 - 我添加了更多信息来展示我如何加载 .js 库。如果是先加载组件的问题，我第一次加载页面时不会发生这种情况吗？

标签： node.js laravel vue.js

【解决方案1】：

我现在已经解决了这个问题：

当我加载地图 api 脚本时，我使用回调方法来初始化地图，并在尝试询问 API 之前设置要使用的 mapLoaded 标志。

有问题的代码没有检查这个标志。

很抱歉浪费您的时间。

【讨论】：