javascript - VueJS,ReferenceError:谷歌未定义
问题描述
我有以下源代码,当我尝试使用以下方法实例化一个新 var 时,我也遇到了以下错误google.maps ...
:
谷歌'未定义
许多答案都谈到了在其他所有事情之前异步加载 API 脚本,并且脚本的顺序很重要,但我认为这不是我的问题。
PS:我用这个main.js
Vue.use(VueGoogleMaps, {
load: {
key: 'MY-KEY',
libraries: 'places', //// If you need to use place input
},
})
谁能帮我?谢谢。
<div class="map-container">
<gmap-map
id="map"
ref="map"
:center="center"
:zoom="15"
map-type-id="roadmap"
style="width:100%; height: 400px;">
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@click="center=m.position"
></gmap-marker>
</gmap-map>
</div>
<script>
import _ from 'lodash'
import { mapState } from 'vuex'
import * as VueGoogleMaps from 'vue2-google-maps'
export default {
computed: {
...mapState([
'map',
]),
mapStyle: function () {
const h = document.body.clientHeight - 80
return 'width: 100%; height: ' + h + 'px'
},
center: function () {
return { lat: 44.837938, lng: -0.579174 }
},
},
mounted: function () {
VueGoogleMaps.loaded.then(() => {
var map = new google.maps.Map(document.getElementById('map'))
}
},
解决方案
正如VueGoogleMaps
我所假设的那样,您已经导入了google
该对象中的所有内容。
编辑:似乎该google
对象被称为gmapApi
.
所以改变
var map = new google.maps.Map(document.getElementById('map'))
至
let map = new VueGoogleMaps.gmapApi.maps.Map(document.getElementById('map'))
由于您没有明确导入任何内容,因此所有内容都应包含在VueGoogleMaps
. 因此,如果您想调用它google
,请按照另一个答案中的描述添加计算字段,除非它gmapApi
应该位于VueGoogleMaps
.
所以
computed: {
google: VueGoogleMaps.gmapApi
}
推荐阅读
- image - 如何在 Flutter 中显示选取的图像
- javascript - Python/Javascript 中的 API 密钥请求
- python - .any() 没有识别出真值
- python-3.x - Openslide:删除飞利浦 TIFF 文件的“标签”图像
- asp.net-mvc - 调用函数 onClick ASP.NET Core
- lambda - Java 8 函数式编程,收集 List 类型的流的输出
? - python - Django None Type 对象不可调用
- angular - Angular 10 - 有条件地动态加载特定的较少文件
- javascript - 如何使用 Jasmine 在 Angular 中模拟服务依赖项?
- exec - Azure Synapse 将 exec 的结果插入表中