原生JavaScript和Vue實現(xiàn)從百度地圖抓取經(jīng)緯度
更新時間：2024年11月13日 10:03:20 作者：I'm蘭陵王
在前端開發(fā)中,使用百度地圖 API 來獲取用戶的經(jīng)緯度是一種常見需求,本文提供了使用原生 JavaScript 和 Vue.js 實現(xiàn)從百度地圖抓取經(jīng)緯度的詳細示例,需要的可以了解下
一、使用原生 JavaScript 獲取百度地圖經(jīng)緯度
1. 引入百度地圖 API
在 HTML 文件的 <head> 標(biāo)簽中引入百度地圖的 API。確保將 你的百度地圖 AK 替換為你實際的 API 密鑰。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地圖 - 原生 JavaScript</title>
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地圖 AK" type="text/javascript"></script>
<style>
#map { width: 100%; height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<button id="getLocation">獲取我的位置</button>
<script>
var map;
function initMap() {
// 創(chuàng)建地圖實例
map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 默認顯示北京
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
// 點擊地圖獲取經(jīng)緯度
map.addEventListener("click", function(e) {
var latitude = e.point.lat; // 獲取緯度
var longitude = e.point.lng; // 獲取經(jīng)度
alert("經(jīng)度: " + longitude + ", 緯度: " + latitude); // 彈出經(jīng)緯度
});
}
function getCurrentLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
alert("當(dāng)前經(jīng)度: " + longitude + ", 當(dāng)前緯度: " + latitude);
}, function() {
alert("獲取位置失敗");
});
} else {
alert("瀏覽器不支持地理定位服務(wù)");
}
}
// 初始化地圖
window.onload = function() {
initMap();
document.getElementById("getLocation").onclick = getCurrentLocation;
};
</script>
</body>
</html>
2. 代碼解析
地圖初始化：通過 BMap.Map 創(chuàng)建地圖，設(shè)置中心點和縮放級別。
點擊事件：通過 map.addEventListener 監(jiān)聽地圖的點擊事件，獲取點擊的經(jīng)緯度并彈出。
獲取用戶位置：使用 Geolocation API 獲取用戶當(dāng)前位置信息，并在地圖上添加標(biāo)記。
二、使用 Vue.js 獲取百度地圖經(jīng)緯度
1. 創(chuàng)建 Vue 項目
如果還沒有 Vue 項目，可以使用 Vue CLI 創(chuàng)建一個新的項目。
vue create my-vue-map-app cd my-vue-map-app
2. 在 public/index.html 中引入百度地圖 API
在public/index.html 文件的 <head> 標(biāo)簽內(nèi)引入百度地圖 API。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 百度地圖</title>
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地圖 AK" type="text/javascript"></script>
</head>
3. 創(chuàng)建 MapComponent.vue 組件
在 src/components 目錄下創(chuàng)建 MapComponent.vue，代碼如下：
<template>
<div>
<div id="map" style="width: 100%; height: 500px;"></div>
<button @click="getCurrentLocation">獲取我的位置</button>
</div>
</template>
<script>
export default {
name: 'MapComponent',
data() {
return {
map: null,
};
},
mounted() {
this.initMap();
},
methods: {
// 初始化百度地圖
initMap() {
this.map = new BMap.Map("map");
const point = new BMap.Point(116.404, 39.915); // 默認顯示北京
this.map.centerAndZoom(point, 15);
this.map.addControl(new BMap.NavigationControl());
// 點擊獲取經(jīng)緯度
this.map.addEventListener("click", (e) => {
const latitude = e.point.lat;
const longitude = e.point.lng;
alert(`經(jīng)度: ${longitude}, 緯度: ${latitude}`);
});
},
// 獲取用戶當(dāng)前地理位置
getCurrentLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const point = new BMap.Point(longitude, latitude);
this.map.centerAndZoom(point, 15);
const marker = new BMap.Marker(point);
this.map.addOverlay(marker);
alert(`當(dāng)前經(jīng)度: ${longitude}, 當(dāng)前緯度: ${latitude}`);
}, () => {
alert("獲取位置失敗");
});
} else {
alert("瀏覽器不支持地理定位服務(wù)");
}
}
}
};
</script>
<style scoped>
#map {
width: 100%;
height: 500px;
}
</style>4. 在 App.vue 中使用組件
在 src/App.vue 中引入并使用 MapComponent：
<template>
<div id="app">
<MapComponent />
</div>
</template>
<script>
import MapComponent from './components/MapComponent.vue';
export default {
name: 'App',
components: {
MapComponent
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
margin-top: 30px;
}
</style>5. 運行 Vue 應(yīng)用
確保你在項目目錄下，然后運行以下命令啟動開發(fā)服務(wù)器：
npm run serve
打開瀏覽器，訪問 http://localhost:8080 網(wǎng)址，你應(yīng)該能看到百度地圖和獲取位置的按鈕。
總結(jié)
這兩個示例展示了如何在前端使用原生 JavaScript 和 Vue.js 集成百度地圖 API，并獲取用戶的經(jīng)緯度信息。根據(jù)實際需求，你可以在此基礎(chǔ)上進行擴展和優(yōu)化，例如添加多個標(biāo)記、繪制路徑等功能。
以上就是原生JavaScript和Vue實現(xiàn)從百度地圖抓取經(jīng)緯度的詳細內(nèi)容，更多關(guān)于JavaScript Vue獲取百度地圖經(jīng)緯度的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要介紹了JavaScript中作用域和作用域鏈解析，條理分明，方便理解，這里推薦給小伙伴們，有需要的朋友可以參考下2016-12-12
下面小編就為大家?guī)硪黄鄠€上傳文件用js驗證文件的格式和大小的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)時鐘功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
javascript中parentNode,childNodes,children的應(yīng)用詳解
本篇文章是對javascript中parentNode,childNodes,children的應(yīng)用進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript內(nèi)存機制之堆內(nèi)存(Heap)與棧內(nèi)存(Stack)詳解
文章將JavaScript引擎中的內(nèi)存分為棧和堆,詳細描述了它們的特點、用途、管理方式和垃圾回收機制,通過代碼實戰(zhàn)演示了基本類型和引用類型的數(shù)據(jù)存儲方式,并解釋了閉包和內(nèi)存泄漏的概念,總結(jié)了棧和堆的區(qū)別,提供了面試高頻問題的回答方法,需要的朋友可以參考下2026-05-05
我們都知道,axios 是是一個跨平臺請求方案,在瀏覽器端采用 XMLHttpRequest API 進行封裝,而在 Node.js 端則采用 http/https 模塊進行封裝,那么本文,我們將來探討這個話題：axios 的跨端架構(gòu)是如何實現(xiàn)的,需要的朋友可以參考下2024-04-04
next.js初始化參數(shù)設(shè)置getServerSideProps應(yīng)用學(xué)習(xí)
這篇文章主要為大家介紹了next.js初始化參數(shù)設(shè)置getServerSideProps的應(yīng)用示例學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)左右聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文介紹了JavaScript中的對象和數(shù)組,包括它們的基本概念、創(chuàng)建方法、屬性操作、遍歷方法、增刪改操作以及常用方法,同時,還討論了原型和繼承、對象的拷貝和方法簡寫等高級技巧,感興趣的朋友跟隨小編一起看看吧2026-02-02
前端JavaScript獲取本地文件目錄內(nèi)容的兩種實現(xiàn)方案
由于瀏覽器的沙箱安全機制,前端 JavaScript 無法直接訪問本地文件系統(tǒng),必須通過用戶主動授權(quán)（如選擇目錄操作）才能獲取文件目錄內(nèi)容,所以本文詳細介紹兩種方案的實現(xiàn)流程、代碼示例及適用場景,需要的朋友可以參考下2025-08-08