在 Vue 中整合 Google 地图方向服务：全面指南

vue.js

2024-04-02 07:44:14

在 Vue 中整合 Google 地图方向服务

简介

本文将全面指导你在 Vue.js 应用程序中整合 Google 地图方向服务，以便在你的地图上直观地显示方向，从而提升用户体验。

前提条件

熟练掌握 Vue.js 基础
已安装 Vue Google 地图插件

整合步骤

1. 设置方向服务

在 Vue 组件的 mounted() 生命周期钩子中，初始化 Google 地图方向服务对象和方向渲染器对象。将方向渲染器附加到地图上。

mounted() {
  const directionsService = new window.google.maps.DirectionsService();
  const directionsRenderer = new window.google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map.value);
}

2. 计算并显示路线

当用户输入起点和终点时，调用 calculateAndDisplayRoute() 函数来计算并显示方向。

calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const origin = document.querySelector('.origin');
  const destination = document.querySelector('.destination');
  directionsService
    .route({
      origin: origin,
      destination: destination,
      waypoints: props.waypoints,
      travelMode: window.google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);
    })
    .catch((e) =>
      window.alert('Directions request failed due to ' + status)
    );
}

3. 添加标记

基于用户的输入，在地图上添加标记以表示起点和终点。

addMarker(e) {
  const location = e.target.getAttribute('data-place');
  const place = this.places.find((p) => p.place_id === location);
  const marker = new window.google.maps.Marker({
    position: place.geometry.location,
    map: map.value,
    title: place.name,
  });
  this.markers.push(marker);
}

代码示例

<template>
  <div class="navigation__header">
    <!-- 其他组件代码 -->
  </div>

  <GMapMap
    :center="center"
    v-on:focus="loadDirection"
    :zoom="11.6"
    style="width: 100vw; height: 100vh"
  >
    <!-- 其他标记代码 -->
  </GMapMap>
</template>

<script>
export default {
  data() {
    // 其他数据代码
  },

  mounted() {
    this.geolocate();
    this.loadDirection();
  },

  methods: {
    // 其他方法代码

    calculateAndDisplayRoute(directionsService, directionsRenderer) {
      const origin = document.querySelector('.origin');
      const destination = document.querySelector('.destination');
      directionsService
        .route({
          origin: origin,
          destination: destination,
          waypoints: props.waypoints,
          travelMode: window.google.maps.TravelMode.DRIVING,
        })
        .then((response) => {
          directionsRenderer.setDirections(response);
        })
        .catch((e) =>
          window.alert('Directions request failed due to ' + status)
        );
    },

    addMarker(e) {
      const location = e.target.getAttribute('data-place');
      const place = this.places.find((p) => p.place_id === location);
      const marker = new window.google.maps.Marker({
        position: place.geometry.location,
        map: map.value,
        title: place.name,
      });
      this.markers.push(marker);
    },
  },
};
</script>