Использование Google Maps с Vue.js

1

Я изучаю Vue, и у меня есть следующая проблема.

Я использую API Карт Google, чтобы найти себя on click. Также при запуске карта должна показывать Улуру так же, как в документации в то время, когда я ее построил. И это сработало. На открытии сайта открылась карта и показал мне Улуру. Он также работает вне new Vue объекта new Vue.

Проблема заключается в следующем: когда я помещаю его в new Vue объект new Vue он не работает. Нет никакой ошибки консоли, ничего, что могло бы сказать мне, что неправильно. Карта просто остается пустой. Я предполагаю, что проблема в том, что я на самом деле не вызываю функцию.

Мой Html:

<div id="map">
</div>

Сценарий принят таким образом. Я считаю, что часть обратного вызова - проблема, но я не знаю, как ее исправить.

<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAL1riTbssWzSBtySctopB9I8wY_OXk0og &callback=initMap"></script>

Мой Vue:

var appAlex = new Vue({
  el: "#root",
  methods: {
    /** Google maps
     * Init map function from Google Maps docs
     */
    initMap: function() {
      var place = {
        lat: -25.363,
        lng: 131.044
        // Barrie location
        // lat: 44.4001,
        // lng: -79.666
      };
      map = new google.maps.Map(document.getElementById("map"), {
        // I made it a global so I can use it in out events
        zoom: 4,
        center: place
      });
      var marker = new google.maps.Marker({
        position: place,
        map: map
      });
    },
    findMe: function() {
      appAlex.getInfo(appAlex.Url).then(ipInfo => {
        // ipInfo;
        let lattitude = ipInfo.loc.slice(0, 7);
        let lng = ipInfo.loc.slice(8, 15);
        let place = {
          lat: parseFloat(lattitude),
          lng: parseFloat(lng)
        };
        map.setCenter({
          lat: place.lat,
          lng: place.lng
        });
        map.setZoom(13);

        // Making the cursor move to a new location.
        let marker = new google.maps.Marker({
          position: place,
          map: map
        });
      });
    }
  }
})

Вероятно, есть много плохих стилистических ошибок, о которых я буду рад также слышать. Как я уже сказал, это мое приложение 1-го Vue, поэтому я не знаю его хорошо.

Так что напомню:

Функция InitMap вызывается, когда она заблокирована в объекте Vue.

Я нашел этот пост, очень похожий на мой, но я его совсем не понимаю.

Мой сценарий называется:

<footer>
  <script src="./appAlex.js"></script>
  <script src="./appSarah.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAL1riTbssWzSBtySctopB9I8wY_OXk0og &callback=appAlex.initMap"></script>
</footer>

Я пытался с и без appAlex перед initMap, но не повезло.

  • 1
    Вы пробовали запустить initMap в mounted хуке компонента?
  • 0
    Я даже не знаю, что это такое или как его использовать, но я прочитаю об этом
Теги:
vue.js

1 ответ

2
Лучший ответ

в вашем коде есть несколько проблем:

  • Вы определили свои методы, но никогда не называете их. Если вы хотите использовать метод, когда экземпляр монтируется (см. Ссылку на крючки жизненного цикла vue здесь), вызовите его в mounted() перехвате

  • Вам не нужно объявлять initMap в свойстве методов.

  • Если вы хотите что-то сделать, когда пользователь нажимает на <div id="map">, измените его на <div id="map" @click="findMe">. Это сокращение для v-on: click, который обнаруживает, когда пользователь нажимает на элемент.

Пример кода (не проверен, но должен быть в порядке):

let map = null;
function initMap() {
  const place = {
    lat: -25.363,
    lng: 131.044
    // Barrie location
    // lat: 44.4001,
    // lng: -79.666
  };
  map = new google.maps.Map(document.getElementById("map"), {
    // I made it a global so I can use it in out events
    zoom: 4,
    center: place
  });
  const marker = new google.maps.Marker({
    position: place,
    map,
  });
}

var appAlex = new Vue({
  el: "#root",
  mounted() {
    // do something after mounting vue instance
    initMap();
  },
  methods: {
    findMe() {
      appAlex.getInfo(appAlex.Url).then((ipInfo) => {
        // ipInfo;
        const lattitude = ipInfo.loc.slice(0, 7);
        const lng = ipInfo.loc.slice(8, 15);
        const place = {
          lat: parseFloat(lattitude),
          lng: parseFloat(lng)
        };
        map.setCenter({
          lat: place.lat,
          lng: place.lng
        });
        map.setZoom(13);

        // Making the cursor move to a new location.
        const marker = new google.maps.Marker({
          position: place,
          map,
        });
      });
    }
  }
})
Поделиться
  • 0
    Могу ли я поместить карту инициализации в methods ?
  • 0
    Вы уверены, что можете, но нет смысла делать это.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню