Как обновить карту из метода в Vue - PullRequest
Новая
       24

Как обновить карту из метода в Vue

0 голосов
/ 03 апреля 2020

Я занят созданием пользовательского интерфейса, в котором пользователь может вводить набор путевых точек, источник и пункт назначения и выводить вычисленный маршрут. Для этого я использую API Карт Google. Я делаю это с Vue. js. В настоящее время у меня есть два метода, которые выполняются. Первый initMap() выполняется при монтировании компонента Vue. js, второй метод directions() выполняется при нажатии кнопки в пользовательском интерфейсе (я пропустил его, чтобы сделать код короче).

Проблема: В настоящее время оба метода initMap() и directions() создают новый экземпляр google.maps.Map при каждом запуске. Это создает два вызова API Карт Google. Как настроить метод directions() для обновления существующей карты вместо необходимости каждый раз создавать новый вызов? 

<template>
    <div id="map" style="width: 100%; height:100%;"></div>
</template>

<script>
import { loadedGoogleMapsAPI } from "./GoogleMapsApiLoader";

export default {
  mounted() {
    loadedGoogleMapsAPI.then(() => {
      this.initMap();
    });
  },

  data() {
    return {
      mapOptions: {}
    };
  },
  methods: {

    initMap() {
    //This function initialises the page with a new google map element
      mapOptions = {
        zoom: 7,
        center: { lat: -28.4792625, lng: 24.6727135 },
        mapTypeId: "terrain"
      };
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    },

directions() {
    //This directions method is executed once a button is pressed on the UI
    //How do I get this directions method to update the map already created in 
    //initMap() instead of creating a second map and generating a second call
    //to the Google Maps API?
      mapOptions = {
        zoom: 7,
        center: { lat: -28.4792625, lng: 24.6727135 },
        mapTypeId: "terrain"
      };
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);


      var directionsService = new google.maps.DirectionsService();
      var directionsDisplay = new google.maps.DirectionsRenderer();

      directionsService.route(
        {
          origin: "Kimberley, Northern-Cape, South Africa",
          destination: "Potchefstroom, South Africa",
          travelMode: "DRIVING"
        },

        function(response, status) {
          if (status === google.maps.DirectionsStatus.OK) {
              //I plan to do some post-processing here
          } 
          else {
            window.alert("Directions request failed: " + status);
          }
        }
      );

      directionsDisplay.setMap(map);
    }
    }
};
</script>

1 Ответ

1 голос
/ 03 апреля 2020

Проблема

Вы создаете новый экземпляр карты каждый раз, когда вызывается directions(). 

 mapOptions = {
        zoom: 7,
        center: { lat: -28.4792625, lng: 24.6727135 },
        mapTypeId: "terrain"
      };
      var map = new google.maps.Map(document.getElementById("map"), mapOptions); //--> here


      var directionsService = new google.maps.DirectionsService();
      var directionsDisplay = new google.maps.DirectionsRenderer();
      ... // rest of the code

Решение

сохраните экземпляр map в одном из data переменных в компоненте и использовать то же самое в directions() методе. 

data() {
    return {
      mapOptions: {},
      map: null // --> HERE
    };
  },
  methods: {

    initMap() {
    //This function initialises the page with a new google map element
      mapOptions = {
        zoom: 7,
        center: { lat: -28.4792625, lng: 24.6727135 },
        mapTypeId: "terrain"
      };
      this.map = new google.maps.Map(document.getElementById("map"), mapOptions); // --> HERE
    },
directions() {
    //This directions method is executed once a button is pressed on the UI
    //How do I get this directions method to update the map already created in 
    //initMap() instead of creating a second map and generating a second call
    //to the Google Maps API?
      mapOptions = {
        zoom: 7,
        center: { lat: -28.4792625, lng: 24.6727135 },
        mapTypeId: "terrain"
      };
      //var map = new google.maps.Map(document.getElementById("map"), mapOptions); //--> HERE delete this


      var directionsService = new google.maps.DirectionsService();
      var directionsDisplay = new google.maps.DirectionsRenderer();

      directionsService.route(
        {
          origin: "Kimberley, Northern-Cape, South Africa",
          destination: "Potchefstroom, South Africa",
          travelMode: "DRIVING"
        },

        function(response, status) {
          if (status === google.maps.DirectionsStatus.OK) {
              //I plan to do some post-processing here
          } 
          else {
            window.alert("Directions request failed: " + status);
          }
        }
      );

      directionsDisplay.setMap(this.map); // --> HERE
    }
...