VUE + google地图如何包含api google

VUE是一种流行的前端开发框架，而Google地图是一种强大的地图服务API。结合VUE和Google地图API可以实现在前端页面中展示地图、标记位置、绘制路线等功能。

在VUE中使用Google地图API，首先需要在HTML文件中引入Google地图的API库。可以通过在<head>标签中添加以下代码来引入Google地图API：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

其中，YOUR_API_KEY需要替换为你自己的Google地图API密钥。

接下来，在VUE组件中，可以通过以下步骤来使用Google地图API：

在<template>标签中，添加一个<div>元素作为地图容器，设置宽度和高度：

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

在<script>标签中，使用mounted钩子函数来初始化地图，并在地图加载完成后执行相应的操作：

<script>
export default {
  mounted() {
    // 初始化地图
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 37.7749, lng: -122.4194 }, // 设置地图中心点的经纬度
      zoom: 12 // 设置地图缩放级别
    });

    // 在地图上添加标记
    const marker = new google.maps.Marker({
      position: { lat: 37.7749, lng: -122.4194 }, // 设置标记的经纬度
      map: map // 将标记添加到地图上
    });

    // 绘制路线
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);
    const request = {
      origin: 'San Francisco, CA',
      destination: 'Los Angeles, CA',
      travelMode: 'DRIVING'
    };
    directionsService.route(request, function(result, status) {
      if (status == 'OK') {
        directionsRenderer.setDirections(result);
      }
    });
  }
}
</script>

以上代码演示了如何在VUE中使用Google地图API来展示地图、添加标记和绘制路线。你可以根据自己的需求进一步扩展和定制。