如何从 Vue 中的方法更新地图

Question

我正忙于创建一个 UI，用户可以在其中输入一组 waypoints、出发地和目的地，并输出计算出的路线。为此，我正在使用 Google 地图 API。我用 Vue.js 来做这件事。我目前有两种方法被执行。第一个 initMap() 在 Vue.js 组件被挂载时执行，第二个方法 directions() 在 UI 上按下按钮时执行（我把它留下来使代码更短）。

问题： 目前，initMap() 和 directions() 方法都在每次运行时创建一个 google.maps.Map 的新实例。这将创建对 Google 映射 API 的两次调用。如何设置 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>

Answer 1

问题

每次调用 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
    }

如何从 Vue 中的方法更新地图

How to update map from method in Vue

javascript

google-maps-api-3

laravel

vue.js

问题

解决方案