共计 4737 个字符，预计需要花费 12 分钟才能阅读完成。
Google 地图是一个强大的工具，用于在网络上显示交互式地图和基于位置的服务。想象一下，您正在创建一个帮助用户计划旅行的旅行应用程序。借助 Google 地图，您可以显示不同的路线、兴趣点，并允许用户缩放和单击标记以获得更好的体验。
将 Google 地图功能集成到 Vue.js 应用程序中可以增强用户体验并提供有价值的地理空间功能。在本教程中，我们将探索使用流行的 Vue-google-maps 库将 Google 地图集成到 Vue 应用程序中的过程。
前提条件
所需技术
-
Node.js : https://nodejs.org
-
npn : https://www.npmjs.com/
-
Google 地图 : https://console.cloud.google.com/
-
Google 云控制台 : https://console.cloud.google.com/
-
Vue-google-maps : https://vue-map.netlify.app/
步骤与要求
-
Node.js 和 npm 安装在您的系统上。
-
您将需要一个 Google 地图帐户。
-
你应该对 Vue 很熟悉。## 获取 Google 地图 API 密钥 我假设您已经有一个 Google 地图帐户。如果您还没有帐户，可以按照以下步骤创建一个新帐户。
-
登录谷歌云控制台。
-
单击 Select a Project 下拉菜单并选择 New Project. 为您的项目命名，然后单击 Create.
-
从 Cloud Console 的导航菜单导航至 APIs & Services→。Dashboard
-
单击 + ENABLE APIS AND SERVICES 按钮。
-
搜索 Maps JavaScript API 并选择它。
-
单击 Enable 按钮为您的项目激活 API。
-
返回导航菜单并选择 APIs & Services→Credentials.
-
单击 Create Credentials 并选择 API key.
-
复制生成的 API 密钥并确保其安全。您需要将此密钥添加到您的 Vue.js 应用程序中才能访问 Google 地图服务。## Vue-google-maps 安装 Vue-google-maps 是 Vue.js 应用程序的流行集成，可以无缝合并 Google 地图功能。它提供了一系列 Vue 组件，可简化在 Vue 应用程序中实现交互式地图、标记和基于地理位置的功能的过程。在安装之前 vue-google-maps，我们先创建一个新的 Vue 项目。为此，请打开终端并执行以下命令：
npm create vue@latest按照提示创建一个新的 Vue 项目，如下图所示。接下来，我们将通过运行以下命令将包安装到应用程序中：
npm install -S @fawmi/vue-google-mapsVue-google-maps 配置
安装该库后，您需要将其配置为使用您的 Google 地图 API 密钥。在您的 Vue 项目中，打开 main.js 文件并添加以下代码：
import {createApp} from "vue";
import VueGoogleMaps from "@fawmi/vue-google-maps";
import App from "./App.vue";
import "./assets/main.css";
const app = createApp(App);
app.use(VueGoogleMaps, {
load: {key: 'YOUR_GOOGLE_MAPS_API_KEY,},
})
.mount("#app");
替换 YOUR_GOOGLE_MAPS_API_KEY 为您之前获得的 API 密钥并保存代码。
在此阶段，如果重新加载应用程序，将会出现导入问题。要解决此错误，请将以下配置添加到您的 vite.config.js 文件中。
import {fileURLToPath, URL} from "node:url";
import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],
resolve: {
alias: {"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
optimizeDeps: {include: ["@fawmi/vue-google-maps", "fast-deep-equal"],
},
});显示地图视图
现在库已经设置完毕，让我们创建一个组件来显示 Google 地图。在您的 Vue 项目中，打开该 App.vue 文件。在该 App.vue 文件中，我们使用该 GMapMap 组件在应用程序中显示地图。为此，请将现有的 App.vue 代码替换为以下代码。
从上面的代码我们有：
-
该 GMapMap 组件用于在模板部分中显示 Google 地图。
-
该 :center 道具用于设置 center 地图的位置。在本例中，它设置为 latitude51.093048 和 longitude 6.842120。
-
该 :zoom 道具将地图的初始缩放级别设置为 7。
-
该 map-type-id 属性定义要显示的地图类型。这里 terrain 使用的是 type。
现在，使用 启动应用程序npm run dev。您应该会看到应用程序中显示的地图，如下图所示。
获取当前用户位置 – 地图标记
我们还可以使用 Geolocation API 获取用户的当前位置，这将提示用户允许应用程序访问他们的位置。然后，我们可以在地图上的用户位置添加一个标记来指示他们的位置。为此，请将代码替换为 app.vue 以下代码。
在上面的代码中，我们将 包装在组件 GMapMarker 内 GMapMap，其中包含用于标记指示器的所有道具。然后，我们利用 getCurrentPositionGeolocation API 检索用户的位置坐标并在 GMapMarker 组件中更新它们。
刷新应用程序；这会将地图标记添加到用户的当前位置，如下图所示：
使用位置搜索
现在，让我们实现一个位置搜索功能，该功能将允许用户搜索地点并将其显示在地图上。在我们将位置搜索功能添加到 vue 应用程序之前，我们需要首先将库放置到 vite.config.js。使用下面的代码：
//...
load: {
key: 'YOUR_GOOGLE_MAPS_API_KEY',
libraries: "places"
},
//...
接下来，我们将使用 GMapAutocomplete 组件向 vue 应用程序添加位置搜索。要实现此更新 app.vue 代码，请使用以下代码。
在上面的代码中，我们添加了一个输入字段，用户可以在其中轻松搜索地点，然后通过用地图标记指示所选地点来在地图上显示该位置。该代码将产生以下结果，如图所示。文章来源：https://www.toymoban.com/diary/vue/456.html
文章来源地址 https://www.toymoban.com/diary/vue/456.html
到此这篇关于将 Google 地图集成到 Vue 应用程序中 - 提升用户体验和地理空间功能的文章就介绍到这了, 更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持 TOY 模板网！
原文地址:https://www.toymoban.com/diary/vue/456.html
如若转载，请注明出处：如若内容造成侵权 / 违法违规 / 事实不符，请联系站长进行投诉反馈，一经查实，立即删除！
