Почему карта Google не работает на сайте? - PullRequest
Новая
       3

Почему карта Google не работает на сайте?

1 голос
/ 22 июня 2019

Добрый день, скажите, пожалуйста, кто знает, я сейчас учусь добавлять карту Google на сайт и делать это с этой статьей .Я сделал все, как было указано, но карта не работает, скажите, пожалуйста, почему?Где я ошибся?Api-ключ правильный 100%. И я включаю карту в Google Cloud Platform .Я использую Vue cli Webpack-simple. Мой проект на GitHub

Снимок экрана сломанной карты

Ошибка консоли

Код индекса.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>

1 Ответ

0 голосов
/ 23 июня 2019

Глядя на исходный код, до того, как вы начали пытаться использовать GoogleMapsLoader, ваша ошибка была очень простой;вы пытались использовать window.google в скомпилированном JS, прежде чем он был загружен через googleapis.com.Чтобы исправить, в вашем 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, следуйте документация, которую они предоставляют ;Вы должны заключать любые вызовы API Карт Google в функцию обратного вызова, которую вызывает загрузчик.Существует множество различных подходов к тому, как это сделать, и почти наверняка лучший способ настроить глобальный экземпляр, но, по крайней мере, для того, чтобы ваш код работал, вам нужно будет кодировать вашу смонтированную функцию: 

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));
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...