原生JavaScript和Vue实现从百度地图抓取经纬度

更新时间：2024年11月13日 10:03:20 作者：I'm兰陵王

在前端开发中,使用百度地图 API 来获取用户的经纬度是一种常见需求,本文提供了使用原生 JavaScript 和 Vue.js 实现从百度地图抓取经纬度的详细示例,需要的可以了解下

一、使用原生 JavaScript 获取百度地图经纬度

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() {
            // 创建地图实例
            map = new BMap.Map("map");
            var point = new BMap.Point(116.404, 39.915); // 默认显示北京
            map.centerAndZoom(point, 15);
            map.addControl(new BMap.NavigationControl());
 
            // 点击地图获取经纬度
            map.addEventListener("click", function(e) {
                var latitude = e.point.lat; // 获取纬度
                var longitude = e.point.lng; // 获取经度
                alert("经度: " + longitude + ", 纬度: " + latitude); // 弹出经纬度
            });
        }
 
        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("当前经度: " + longitude + ", 当前纬度: " + latitude);
                }, function() {
                    alert("获取位置失败");
                });
            } else {
                alert("浏览器不支持地理定位服务");
            }
        }
 
        // 初始化地图
        window.onload = function() {
            initMap();
            document.getElementById("getLocation").onclick = getCurrentLocation;
        };
    </script>
</body>
</html>

2. 代码解析

地图初始化：通过 BMap.Map 创建地图，设置中心点和缩放级别。

点击事件：通过 map.addEventListener 监听地图的点击事件，获取点击的经纬度并弹出。

获取用户位置：使用 Geolocation API 获取用户当前位置信息，并在地图上添加标记。

二、使用 Vue.js 获取百度地图经纬度

1. 创建 Vue 项目

如果还没有 Vue 项目，可以使用 Vue CLI 创建一个新的项目。

vue create my-vue-map-app
cd my-vue-map-app

2. 在 public/index.html 中引入百度地图 API

在public/index.html 文件的 <head> 标签内引入百度地图 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. 创建 MapComponent.vue 组件

在 src/components 目录下创建 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());
 
      // 点击获取经纬度
      this.map.addEventListener("click", (e) => {
        const latitude = e.point.lat;
        const longitude = e.point.lng;
        alert(`经度: ${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(`当前经度: ${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 应用

确保你在项目目录下，然后运行以下命令启动开发服务器：

npm run serve

打开浏览器，访问 http://localhost:8080 网址，你应该能看到百度地图和获取位置的按钮。

总结

这两个示例展示了如何在前端使用原生 JavaScript 和 Vue.js 集成百度地图 API，并获取用户的经纬度信息。根据实际需求，你可以在此基础上进行扩展和优化，例如添加多个标记、绘制路径等功能。

以上就是原生JavaScript和Vue实现从百度地图抓取经纬度的详细内容，更多关于JavaScript Vue获取百度地图经纬度的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

浅析JavaScript中作用域和作用域链
本文主要介绍了JavaScript中作用域和作用域链解析，条理分明，方便理解，这里推荐给小伙伴们，有需要的朋友可以参考下
2016-12-12
多个上传文件用js验证文件的格式和大小的方法(推荐)
下面小编就为大家带来一篇多个上传文件用js验证文件的格式和大小的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
JavaScript实现时钟功能
这篇文章主要为大家详细介绍了JavaScript实现时钟功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
javascript中parentNode,childNodes,children的应用详解
本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JavaScript内存机制之堆内存(Heap)与栈内存(Stack)详解
文章将JavaScript引擎中的内存分为栈和堆,详细描述了它们的特点、用途、管理方式和垃圾回收机制,通过代码实战演示了基本类型和引用类型的数据存储方式,并解释了闭包和内存泄漏的概念,总结了栈和堆的区别,提供了面试高频问题的回答方法,需要的朋友可以参考下
2026-05-05
详解axios跨端架构是如何实现的
我们都知道,axios 是是一个跨平台请求方案,在浏览器端采用 XMLHttpRequest API 进行封装,而在 Node.js 端则采用 http/https 模块进行封装,那么本文,我们将来探讨这个话题：axios 的跨端架构是如何实现的,需要的朋友可以参考下
2024-04-04
next.js初始化参数设置getServerSideProps应用学习
这篇文章主要为大家介绍了next.js初始化参数设置getServerSideProps的应用示例学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
微信小程序实现左右联动
这篇文章主要为大家详细介绍了微信小程序实现左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
JavaScript 对象与数组操作大全
本文介绍了JavaScript中的对象和数组,包括它们的基本概念、创建方法、属性操作、遍历方法、增删改操作以及常用方法,同时,还讨论了原型和继承、对象的拷贝和方法简写等高级技巧,感兴趣的朋友跟随小编一起看看吧
2026-02-02
前端JavaScript获取本地文件目录内容的两种实现方案
由于浏览器的沙箱安全机制,前端 JavaScript 无法直接访问本地文件系统,必须通过用户主动授权（如选择目录操作）才能获取文件目录内容,所以本文详细介绍两种方案的实现流程、代码示例及适用场景,需要的朋友可以参考下
2025-08-08