下午好，谁知道请告诉我，我现在正在学习向站点添加 Google map 并使用 this article 完成.我按照指示做了一切，但是卡不起作用，请告诉我为什么？我哪里弄错了？ Api key 100% 正确。 And I turn on the map in Google Cloud Platform .我使用 Vue cli Webpack-simple。 My project on GitHub
index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>google_map</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
</body>
</html>
Google.map 组件:
<template>
<div class="google-map" :id="name"></div>
</template>
<script>
export default {
name: 'google-map',
props: ['name'],
data: function () {
return {
map: ''
}
},
computed: {
mapMarkers: function () {
return this.markers
}
},
mounted: function () {
const element = document.getElementById(this.name)
const options = {
zoom: 14,
center: new google.maps.LatLng(59.93, 30.32)
}
this.map = new google.maps.Map(element, options)
},
methods: {}
}
</script>
<style scoped>
.google-map {
width: 640px;
height: 480px;
margin: 0 auto;
background: gray;
}
</style>
App.vue代码:
<template>
<div class="container">
<google-map :name="name"></google-map>
</div>
</template>
<script>
import googleMap from './components/googleMap.vue'
export default {
data: function () {
return {
name: 'map',
}
},
mounted: function () {
},
components: {googleMap}
}
</script>
最佳答案
查看您的原始代码，在您开始尝试使用 GoogleMapsLoader 之前，您的错误非常简单；在通过 googleapis.com 加载之前，您试图在已编译的 JS 中使用 window.google。要修复，在您的 index.html 中，只需更改此:
<script src="/dist/build.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
对此:
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
<script src="/dist/build.js"></script>
如果您想使用GoogleMapsLoader，请关注the documentation they provide ;您应该将对 Google Maps API 的所有调用包装在加载程序调用的回调函数中。有很多不同的方法可以做到这一点，而且几乎肯定有一种更好的方法来设置全局实例，但至少要使您的代码正常工作，这就是您需要如何编写已安装函数的代码:
mounted: function () {
GoogleMapsLoader.KEY = '[MY_API_KEY]';
GoogleMapsLoader.load(function(google){
const element = document.getElementById(this.name)
const options = {
zoom: 14,
center: new google.maps.LatLng(59.93, 30.32)
}
this.map = new google.maps.Map(element, options)
}.bind(this));
}
关于javascript - 为什么谷歌地图在网站上不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56717119/