Google 地圖是一個(gè)強(qiáng)大的工具，用于在網(wǎng)絡(luò)上顯示交互式地圖和基于位置的服務(wù)。想象一下，您正在創(chuàng)建一個(gè)幫助用戶計(jì)劃旅行的旅行應(yīng)用程序。借助 Google 地圖，您可以顯示不同的路線、興趣點(diǎn)，并允許用戶縮放和單擊標(biāo)記以獲得更好的體驗(yàn)。
將 Google 地圖功能集成到 Vue.js 應(yīng)用程序中可以增強(qiáng)用戶體驗(yàn)并提供有價(jià)值的地理空間功能。在本教程中，我們將探索使用流行的Vue-google-maps庫(kù)將 Google 地圖集成到 Vue 應(yīng)用程序中的過程。
前提條件
所需技術(shù)
Node.js : https://nodejs.org
npn : https://www.npmjs.com/
Google地圖 : https://console.cloud.google.com/
Google云控制臺(tái) : https://console.cloud.google.com/
Vue-google-maps : https://vue-map.netlify.app/
步驟與要求
Node.js和npm安裝在您的系統(tǒng)上。
您將需要一個(gè)Google 地圖帳戶。
你應(yīng)該對(duì)Vue很熟悉。## 獲取 Google 地圖 API 密鑰 我假設(shè)您已經(jīng)有一個(gè) Google 地圖帳戶。如果您還沒有帳戶，可以按照以下步驟創(chuàng)建一個(gè)新帳戶。
登錄谷歌云控制臺(tái)。
單擊Select a Project下拉菜單并選擇New Project.為您的項(xiàng)目命名，然后單擊Create.
從 Cloud Console 的導(dǎo)航菜單導(dǎo)航至APIs & Services→ 。Dashboard
單擊+ ENABLE APIS AND SERVICES按鈕。
搜索Maps JavaScript API并選擇它。
單擊Enable按鈕為您的項(xiàng)目激活 API。
返回導(dǎo)航菜單并選擇APIs & Services→Credentials.
單擊Create Credentials并選擇API key.
復(fù)制生成的API密鑰并確保其安全。您需要將此密鑰添加到您的 Vue.js 應(yīng)用程序中才能訪問 Google 地圖服務(wù)。## Vue-google-maps 安裝 Vue-google-maps是 Vue.js 應(yīng)用程序的流行集成，可以無縫合并 Google 地圖功能。它提供了一系列 Vue 組件，可簡(jiǎn)化在 Vue 應(yīng)用程序中實(shí)現(xiàn)交互式地圖、標(biāo)記和基于地理位置的功能的過程。在安裝之前vue-google-maps，我們先創(chuàng)建一個(gè)新的Vue項(xiàng)目。為此，請(qǐng)打開終端并執(zhí)行以下命令：
npm create vue@latest
按照提示創(chuàng)建一個(gè)新的Vue項(xiàng)目，如下圖所示。 接下來，我們將通過運(yùn)行以下命令將包安裝到應(yīng)用程序中：
npm install -S @fawmi/vue-google-maps
Vue-google-maps 配置
安裝該庫(kù)后，您需要將其配置為使用您的 Google 地圖 API 密鑰。在您的 Vue 項(xiàng)目中，打開 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 密鑰并保存代碼。
在此階段，如果重新加載應(yīng)用程序，將會(huì)出現(xiàn)導(dǎo)入問題。要解決此錯(cuò)誤，請(qǐng)將以下配置添加到您的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"],
},
});顯示地圖視圖
現(xiàn)在庫(kù)已經(jīng)設(shè)置完畢，讓我們創(chuàng)建一個(gè)組件來顯示 Google 地圖。在您的 Vue 項(xiàng)目中，打開該App.vue文件。在該App.vue文件中，我們使用該GMapMap組件在應(yīng)用程序中顯示地圖。為此，請(qǐng)將現(xiàn)有的 App.vue 代碼替換為以下代碼。
<template>
<GMapMap
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 1000px; height: 800px"
>
</GMapMap>
</template>
<script>
export default {
name: "App",
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
};
},
};
</script>從上面的代碼我們有：
該GMapMap組件用于在模板部分中顯示 Google 地圖。
該:center道具用于設(shè)置center地圖的位置。在本例中，它設(shè)置為 latitude51.093048和 longitude 6.842120。
該:zoom道具將地圖的初始縮放級(jí)別設(shè)置為 7。
該map-type-id屬性定義要顯示的地圖類型。這里terrain使用的是 type。
現(xiàn)在，使用 啟動(dòng)應(yīng)用程序npm run dev。您應(yīng)該會(huì)看到應(yīng)用程序中顯示的地圖，如下圖所示。
獲取當(dāng)前用戶位置 - 地圖標(biāo)記
我們還可以使用Geolocation API獲取用戶的當(dāng)前位置，這將提示用戶允許應(yīng)用程序訪問他們的位置。然后，我們可以在地圖上的用戶位置添加一個(gè)標(biāo)記來指示他們的位置。為此，請(qǐng)將代碼替換為app.vue以下代碼。
<template>
<GMapMap
:center="center"
:zoom="zoom"
map-type-id="terrain"
style="width: 1000px; height: 800px"
>
<GMapMarker
:key="marker.id"
v-for="marker in markers"
:position="marker.position"
/>
</GMapMap>
</template>
<script>
export default {
name: "App",
data() {
return {
center: { lat: 6.465422, lng: 3.406448 },
zoom: 7,
markers: [
{
id: "user-marker",
position: {
lat: position.coords.latitude,
lng: position.coords.longitude,
},
},
],
};
},
methods: {
geolocate: function () {
navigator.geolocation.getCurrentPosition((position) => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
this.markers.push({
id: "user-marker",
position: {
lat: position.coords.latitude,
lng: position.coords.longitude,
},
});
});
},
},
mounted() {
this.geolocate();
},
};
</script>在上面的代碼中，我們將 包裝在組件GMapMarker內(nèi)GMapMap，其中包含用于標(biāo)記指示器的所有道具。然后，我們利用getCurrentPositionGeolocation API 檢索用戶的位置坐標(biāo)并在 GMapMarker 組件中更新它們。
刷新應(yīng)用程序；這會(huì)將地圖標(biāo)記添加到用戶的當(dāng)前位置，如下圖所示：
使用位置搜索
現(xiàn)在，讓我們實(shí)現(xiàn)一個(gè)位置搜索功能，該功能將允許用戶搜索地點(diǎn)并將其顯示在地圖上。在我們將位置搜索功能添加到 vue 應(yīng)用程序之前，我們需要首先將庫(kù)放置到 vite.config.js。使用下面的代碼：
//...
load: {
key: 'YOUR_GOOGLE_MAPS_API_KEY',
libraries: "places"
},
//...接下來，我們將使用 GMapAutocomplete 組件向 vue 應(yīng)用程序添加位置搜索。要實(shí)現(xiàn)此更新 app.vue 代碼，請(qǐng)使用以下代碼。
<template>
<div>
<GMapAutocomplete
placeholder="This is a placeholder"
@place_changed="setPlace"
style="font-size: large"
></GMapAutocomplete>
<GMapMap
:center="mapCenter"
:zoom="mapZoom"
style="width: 1000px; height: 700px"
>
<GMapMarker :position="markerPosition" />
</GMapMap>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
mapCenter: { lat: 6.465422, lng: 3.406448 }, // Initial center
mapZoom: 7, // Initial zoom level
markerPosition: null, // Marker position will be set based on searched location
};
},
methods: {
setPlace(place) {
this.markerPosition = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
};
this.mapCenter = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
};
},
},
};
</script>在上面的代碼中，我們添加了一個(gè)輸入字段，用戶可以在其中輕松搜索地點(diǎn)，然后通過用地圖標(biāo)記指示所選地點(diǎn)來在地圖上顯示該位置。該代碼將產(chǎn)生以下結(jié)果，如圖所示。文章來源：http://www.zghlxwxcb.cn/article/456.html
文章來源地址http://www.zghlxwxcb.cn/article/456.html
到此這篇關(guān)于將Google地圖集成到Vue應(yīng)用程序中-提升用戶體驗(yàn)和地理空間功能的文章就介紹到這了,更多相關(guān)內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
