javascript - 如何从 Vue 中的方法更新 map

Question

我正忙于创建一个用户界面，用户可以在其中输入一组航路点、起点和终点，并输出计算出的路线。为此，我使用了 Google map API。 我正在使用 Vue.js 执行此操作。我目前有两种执行的方法。第一个 initMap() 在 Vue.js 组件安装时执行，第二个方法 directions() 在 UI 上按下按钮时执行(我留下了它)以使代码更短)。

问题: 目前，initMap() 和 directions() 方法每次运行时都会创建 google.maps.Map 的新实例。这会创建对 Google Maps API 的两次调用。如何设置 directions() 方法来更新现有 map ，而不必每次都创建新的调用？

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

Answer 1

问题

每次调用 directions() 时，您都会创建新的 map 实例。

 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
    }