为什么Google地图在该网站上不起作用？

Question

Good afternoon, please tell me who knows, I am now learning to add a Google map to the site and do it with this article . 下午好，请告诉我谁知道，我现在正在学习将Google地图添加到该网站并通过本文进行操作。 I did everything as it was indicated, but the card does not work, please tell me why? 我按照指示执行了所有操作，但是该卡不起作用，请告诉我为什么？ Where did I make a mistake? 我在哪里弄错了？ Api-key is correct 100%. api键是正确的100％。 And I turn on the map in Google Cloud Platform . 然后在Google Cloud Platform中打开地图。 I use Vue cli Webpack-simple. 我使用简单的Vue cli Webpack。 My project on GitHub 我在GitHub上的项目

Screenshot of a broken map 破碎的地图的屏幕截图

Console Error 控制台错误

Code of index.html: 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>

Component Google.map: 组件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>

Code of 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>

Answer 1

Looking at your original code, before you started trying to use GoogleMapsLoader , your error was very simple; 查看原始代码，开始尝试使用GoogleMapsLoader ，您的错误非常简单； you were trying to use window.google in the compiled JS, before it was loaded through googleapis.com . 您试图通过googleapis.com加载之前在已编译的JS中使用window.google 。 To fix, in your index.html, simply change this: 要解决此问题，只需在index.html中进行以下更改：

<script src="/dist/build.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>

To this: 对此：

<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]"></script>
<script src="/dist/build.js"></script>

If you want to use GoogleMapsLoader , please follow the documentation they provide ; 如果您想使用GoogleMapsLoader ，请遵循其提供的文档； you should be wrapping any calls to the Google Maps API inside a callback function that the loader calls. 您应该将对Google Maps API的所有调用包装在加载程序调用的回调函数中。 There are a bunch of different approaches to how to do this, and almost definitely a better way to set up a global instance, but to at least make your code work, this is how you would need to code your mounted function: 有很多不同的方法可以做到这一点，几乎可以肯定是建立全局实例的一种更好的方法，但是至少要使您的代码正常工作，这是您需要编写已挂载函数的代码：

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));
}

为什么Google地图在该网站上不起作用？

问题描述

1 个解决方案

解决方案1
0 2019-06-23 03:28:03

为什么Google地图在该网站上不起作用？

问题描述

1 个解决方案

解决方案1 0 2019-06-23 03:28:03

解决方案1
0 2019-06-23 03:28:03