Question

我对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);

Answer 1

我已经解决了这个问题：

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

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

很抱歉浪费您的时间。

使用Google Maps图书馆的Vue应用程序在刷新时会丢失图书馆

1 个答案: