原生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> 標簽中引入百度地圖的 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("當前經(jīng)度: " + longitude + ", 當前緯度: " + latitude);
}, function() {
alert("獲取位置失敗");
});
} else {
alert("瀏覽器不支持地理定位服務");
}
}
// 初始化地圖
window.onload = function() {
initMap();
document.getElementById("getLocation").onclick = getCurrentLocation;
};
</script>
</body>
</html>
2. 代碼解析
地圖初始化：通過 BMap.Map 創(chuàng)建地圖，設置中心點和縮放級別。
點擊事件：通過 map.addEventListener 監(jiān)聽地圖的點擊事件，獲取點擊的經(jīng)緯度并彈出。
獲取用戶位置：使用 Geolocation API 獲取用戶當前位置信息，并在地圖上添加標記。
二、使用 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> 標簽內(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}`);
});
},
// 獲取用戶當前地理位置
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(`當前經(jīng)度: ${longitude}, 當前緯度: ${latitude}`);
}, () => {
alert("獲取位置失敗");
});
} else {
alert("瀏覽器不支持地理定位服務");
}
}
}
};
</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 應用
確保你在項目目錄下，然后運行以下命令啟動開發(fā)服務器：
npm run serve
打開瀏覽器，訪問 http://localhost:8080 網(wǎng)址，你應該能看到百度地圖和獲取位置的按鈕。
總結
這兩個示例展示了如何在前端使用原生 JavaScript 和 Vue.js 集成百度地圖 API，并獲取用戶的經(jīng)緯度信息。根據(jù)實際需求，你可以在此基礎上進行擴展和優(yōu)化，例如添加多個標記、繪制路徑等功能。
以上就是原生JavaScript和Vue實現(xiàn)從百度地圖抓取經(jīng)緯度的詳細內(nèi)容，更多關于JavaScript Vue獲取百度地圖經(jīng)緯度的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了淺談js數(shù)組splice刪除某個元素爬坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
JavaScript 拖拽實現(xiàn)（附注釋），最經(jīng)典簡單短小精悍！
JavaScript拖拽實現(xiàn)（附注釋），最經(jīng)典！最簡單！短小精悍！2009-04-04
JS延遲加載,也就是等頁面加載完成之后再加載 JavaScript 文件,JS延遲加載有助于提高頁面加載速度,本文小編給大家介紹了JS延遲加載的幾種方式小結,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
這篇文章主要介紹了js點擊列表文字對應該行顯示背景顏色的實現(xiàn)代碼,感興趣的小伙伴可以參考下2015-08-08
這篇文章主要為大家詳細介紹了javascript正則表達式，由淺入深的幫助大家學習正則表達式，感興趣的小伙伴們可以參考一下2016-03-03
Bootstrap每天必學之表單，本文講解的就是大家最為常用的提交數(shù)據(jù)的Form表單，感興趣的小伙伴們可以參考一下2015-11-11
圣誕節(jié)快到了,經(jīng)常會在抖音上刷到圣誕樹的視頻,所以本文小編給大家介紹了如何使用JS實現(xiàn)圣誕樹,文章通過代碼示例給大家介紹的非常詳細,感興趣的小伙伴跟著小編一起來看看吧2023-12-12
下面小編就為大家推薦一篇基于JSONP原理解析，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
近期在練習或寫項目時經(jīng)常會遇到時間格式的轉換問題,今天我就來總結一下,這篇文章主要給大家介紹了關于JavaScript中幾種時間格式之間的簡單轉換,需要的朋友可以參考下2024-01-01
這篇文章主要為大家介紹了webpack?5.68.0版本教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11