快捷導(dǎo)航

原生JavaScript和Vue實(shí)現(xiàn)從百度地圖抓取經(jīng)緯度

更新時(shí)間：2024年11月13日 10:03:20 作者：I'm蘭陵王

在前端開(kāi)發(fā)中,使用百度地圖 API 來(lái)獲取用戶的經(jīng)緯度是一種常見(jiàn)需求,本文提供了使用原生 JavaScript 和 Vue.js 實(shí)現(xiàn)從百度地圖抓取經(jīng)緯度的詳細(xì)示例,需要的可以了解下

一、使用原生 JavaScript 獲取百度地圖經(jīng)緯度

1. 引入百度地圖 API

在 HTML 文件的 <head> 標(biāo)簽中引入百度地圖的 API。確保將你的百度地圖 AK 替換為你實(shí)際的 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)建地圖實(shí)例
            map = new BMap.Map("map");
            var point = new BMap.Point(116.404, 39.915); // 默認(rèn)顯示北京
            map.centerAndZoom(point, 15);
            map.addControl(new BMap.NavigationControl());
 
            // 點(diǎn)擊地圖獲取經(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. 代碼解析

地圖初始化：通過(guò) BMap.Map 創(chuàng)建地圖，設(shè)置中心點(diǎn)和縮放級(jí)別。

點(diǎn)擊事件：通過(guò) map.addEventListener 監(jiān)聽(tīng)地圖的點(diǎn)擊事件，獲取點(diǎn)擊的經(jīng)緯度并彈出。

獲取用戶位置：使用 Geolocation API 獲取用戶當(dāng)前位置信息，并在地圖上添加標(biāo)記。

二、使用 Vue.js 獲取百度地圖經(jīng)緯度

1. 創(chuàng)建 Vue 項(xiàng)目

如果還沒(méi)有 Vue 項(xiàng)目，可以使用 Vue CLI 創(chuàng)建一個(gè)新的項(xià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); // 默認(rèn)顯示北京
      this.map.centerAndZoom(point, 15);
      this.map.addControl(new BMap.NavigationControl());
 
      // 點(diǎn)擊獲取經(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. 運(yùn)行 Vue 應(yīng)用

確保你在項(xiàng)目目錄下，然后運(yùn)行以下命令啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run serve

打開(kāi)瀏覽器，訪問(wèn) http://localhost:8080 網(wǎng)址，你應(yīng)該能看到百度地圖和獲取位置的按鈕。

總結(jié)

這兩個(gè)示例展示了如何在前端使用原生 JavaScript 和 Vue.js 集成百度地圖 API，并獲取用戶的經(jīng)緯度信息。根據(jù)實(shí)際需求，你可以在此基礎(chǔ)上進(jìn)行擴(kuò)展和優(yōu)化，例如添加多個(gè)標(biāo)記、繪制路徑等功能。

以上就是原生JavaScript和Vue實(shí)現(xiàn)從百度地圖抓取經(jīng)緯度的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Vue獲取百度地圖經(jīng)緯度的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: