javascript - 在 Vue 中初始化“marker-animate-unobtrusive”失败
问题描述
我正在尝试使用 marker-animate-unobtrusive 但我不断收到此错误:
我在SO上发现了另一篇文章,谈到在 google 加载后需要该文件,但我不知道该怎么做。在我的组件中,我有这个:
import SlidingMarker from 'marker-animate-unobtrusive'
在我的安装方法中,我有这个:
SlidingMarker.initializeGlobally()
任何帮助是极大的赞赏
解决方案
This is expected error since SlidingMarker
extends google.maps.Marker
class, GoogleMaps JavaScript API library needs to be loaded first, one option would to add a reference via index.html
file:
<script src="https://maps.googleapis.com/maps/api/js?key=--KEY-GOES-HERE--"></script>
Another option would to utilize async JavaScript loader, e.g. scriptjs
. The example for loading GoogleMaps JavaScript API and marker-animate-unobtrusive
module could look like this:
created: function(){
get("https://maps.googleapis.com/maps/api/js?key=", () => {
const SlidingMarker = require('marker-animate-unobtrusive')
SlidingMarker.initializeGlobally()
const map = new google.maps.Map(document.getElementById('map'), this.mapOptions);
const marker = new SlidingMarker({
position: this.mapOptions.center,
map: map,
title: 'Im sliding marker'
});
});
}
Here is a demo for your reference
Update
With vue-google-maps
library marker-animate-unobtrusive
plugin could be integrated like this:
<template>
<div>
<GmapMap :center="center" :zoom="zoom" ref="mapRef"></GmapMap>
</div>
</template>
<script>
/* global google */
export default {
data() {
return {
zoom: 12,
center: { lat: 51.5287718, lng: -0.2416804 },
};
},
mounted: function() {
this.$refs.mapRef.$mapPromise.then(() => {
this.initSlidingMarker(this.$refs.mapRef.$mapObject)
})
},
methods: {
initSlidingMarker(map){
const SlidingMarker = require('marker-animate-unobtrusive')
SlidingMarker.initializeGlobally()
const marker = new SlidingMarker({
position: map.getCenter(),
map: map,
title: 'Im sliding marker'
});
google.maps.event.addListener(map, 'click', (event) => {
marker.setDuration(1000);
marker.setEasing('linear');
marker.setPosition(event.latLng);
});
}
}
}
</script>
<style>
.vue-map-container {
height: 640px;
}
</style>
推荐阅读
- reactjs - 确保图像是从 React 中的相机捕获的
- pytorch - 使用 torch.autograd.profiler.profile 时出现类型错误
- discord - 为什么我的不和谐机器人不发送变量?
- c++ - 在 C++ 中正确使用模运算符
- mysql - 在mysql上分区或不分区
- python - JupyterLab 启动时如何加载 notebook.json 或 custom.js?
- python-3.x - 如何从 SHAP 中的摘要图中获取特征重要性/特征排名而不会崩溃?
- python - 无法让代码检测轮到谁在 Python IDLE
- three.js - 如何在三个 js 中获取有关对象阴影的信息?
- python - 从 Linux 中的 PE 文件中获取“产品名称”