APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > JavaScript >

收藏
分享到

基于Vue3实现百度地图位置选择器组件

JavaScript 来源：互联网 作者：佚名 发布时间：2025-05-13 20:58:00 人浏览
摘要

在开发前端应用时，地图选择器是一个非常常见的需求。尤其是在一些需要用户选择地址的场景，如电商平台、旅游网站、酒店预定等，百度地图组件能提供准确的地理位置服务。在本文中，

在开发前端应用时，地图选择器是一个非常常见的需求。尤其是在一些需要用户选择地址的场景，如电商平台、旅游网站、酒店预定等，百度地图组件能提供准确的地理位置服务。在本文中，我们将一步步展示如何使用 Vue 3 和 Element Plus 来实现一个百度地图位置选择器组件。这个组件允许用户通过地图选择位置，并展示详细的地址信息。

准备工作

在开始实现之前，我们需要确保已经安装了以下依赖：

Vue 3：Vue.js 是我们前端应用的基础框架。

Element Plus：一个基于 Vue 3 的组件库，提供了许多高质量的 UI 组件。

百度地图 API：百度地图 API 提供了丰富的地图功能接口，供我们在网页中嵌入地图，并获取地理位置信息。

安装依赖

如果你还没有安装这些依赖，可以通过以下命令安装：

1

npm install vue@next element-plus

同时，为了能在 Vue 项目中使用百度地图，我们需要引入百度地图的 API。在 index.html 中，添加以下代码：

1

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>

记得将 YOUR_API_KEY 替换成你自己的百度地图 API 密钥。

实现步骤

1. 创建百度地图组件

我们先从创建百度地图组件开始，这个组件将允许用户在地图上选择位置。

1.1 创建 BaiduMapPicker.vue 组件

首先，我们创建一个 BaiduMapPicker.vue 组件，用于加载地图和处理用户选择的位置。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<template>

  <div id="map" style="height: 100%;"></div>

</template>

 

<script setup lang="ts">

import { onMounted, ref, watch } from 'vue';

 

const location = ref({

  latitude: 26.61246398970894,

  longitude: 106.59077252491133,

});

 

// 初始化百度地图

onMounted(() => {

  const map = new BMapGL.Map("map");

  const point = new BMapGL.Point(location.value.longitude, location.value.latitude);

  map.centerAndZoom(point, 15);

  map.addOverlay(new BMapGL.Marker(point));

 

  map.addEventListener('click', (e: any) => {

    location.value.latitude = e.latlng.lat;

    location.value.longitude = e.latlng.lng;

    map.clearOverlays();

    map.addOverlay(new BMapGL.Marker(e.latlng));

  });

});

</script>

 

<style scoped>

#map {

  width: 100%;

  height: 100%;

}

</style>

1.2 说明

地图初始化：我们通过百度地图的 BMapGL.Map 类来创建一个地图实例，传入 longitude 和 latitude 初始化地图的中心位置，并设置缩放级别。

点击事件：监听地图上的点击事件，用户每点击一次地图，地图会更新位置并重新标记。

2. 创建主页面，使用地图组件

接下来，我们将在主页面中使用刚刚创建的 BaiduMapPicker 组件。我们会在弹窗中展示地图，并允许用户选择位置。

2.1 创建主页面

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

<template>

  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000px">

    <div class="container">

      <h2>选择位置</h2>

      <BaiduMapPicker

        v-model="location"

        @update:location="handleLocationUpdate"

      />

      <div class="location-info">

        <h3>选中的位置信息：</h3>

        <p>纬度：{{ location.latitude }}</p>

        <p>经度：{{ location.longitude }}</p>

      </div>

    </div>

    <template #footer>

      <el-button @click="submitForm" type="primary">确定</el-button>

      <el-button @click="cancel" type="default">取消</el-button>

    </template>

  </Dialog>

</template>

 

<script setup lang="ts">

import { ref } from 'vue';

import { ElButton, ElDialog } from 'element-plus';

import BaiduMapPicker from '@/components/BaiduMapPicker.vue';

 

const dialogVisible = ref(false);

const dialogTitle = ref("选择地址");

const location = ref({ latitude: 26.61246398970894, longitude: 106.59077252491133 });

 

const handleLocationUpdate = (newLocation: { latitude: number, longitude: number }) => {

  location.value = newLocation;

};

 

const submitForm = () => {

  dialogVisible.value = false;

  console.log("提交的位置：", location.value);

};

 

const cancel = () => {

  dialogVisible.value = false;

};

</script>

 

<style scoped>

.container {

  padding: 20px;

}

 

.location-info {

  margin-top: 20px;

  background-color: #f5f7fa;

  padding: 15px;

  border-radius: 5px;

}

 

h2 {

  margin-bottom: 15px;

  font-size: 1.5em;

}

 

h3 {

  margin-bottom: 10px;

}

 

p {

  font-size: 1em;

  margin: 5px 0;

}

</style>

2.2 说明

Dialog 弹窗：我们使用了 Element Plus 的 Dialog 组件来展示百度地图和位置信息。当用户点击“确定”时，我们可以通过 submitForm 方法提交选中的位置。

位置更新：当用户点击地图时，handleLocationUpdate 会被触发，更新 location 数据并显示在页面上。

3. 弹窗控制与位置展示

我们使用了 Element Plus 的 Dialog 组件来控制弹窗的显示与隐藏，确保用户体验良好。

1

2

const dialogVisible = ref(false); // 控制弹窗的显示

const dialogTitle = ref("选择地址"); // 弹窗标题

通过这种方式，我们实现了一个简单而直观的地址选择功能。

效果展示

1.位置选择

用户可以在弹窗中看到百度地图，点击任意位置，地图上的标记会随之更新，显示选中的纬度和经度。

2.提交结果

点击“确定”后，用户选择的经纬度数据会被提交，并可以用于后续的业务逻辑。

总结

通过这篇博客，我们学习了如何在 Vue 3 中使用百度地图 API 实现一个位置选择器组件。该组件不仅支持位置选择功能，还能够展示用户选择的详细地址信息。通过 Vue 3 和 Element Plus 的结合，我们能够快速开发出高质量的 UI 组件，提升用户体验。

小贴士

API 密钥保护：在生产环境中，记得将百度地图的 API 密钥保存在安全的地方，避免暴露在前端代码中。

优化加载速度：考虑到地图加载时间较长，可以对地图组件进行懒加载，提升用户体验。
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • NodeJS的使用与NPM包管理器介绍

    NodeJS的使用与NPM包管理器介绍
    如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。如果你熟
  • JavaScript获取URL中参数值的方法
    在开发 Web 应用时，我们经常需要从 URL 中提取参数值，比如获取用户的查询条件、跟踪统计信息等。本文将详细介绍几种在 JavaScript 中获取
  • 前端发布缓存导致白屏几种解决方案
    一、 核心配置优化（前提是访问网站的请求能抵达服务器） 方案一：前端项目设置全局不缓存方案 运行逻辑：在H5服务器配置中增加Cache
  • 基于Vue3实现百度地图位置选择器组件
    在开发前端应用时，地图选择器是一个非常常见的需求。尤其是在一些需要用户选择地址的场景，如电商平台、旅游网站、酒店预定等，百
  • 无感知刷新Token示例介绍
    在前后端分离的应用中，使用Token进行认证是一种较为常见的方式。但是，由于Token的有效期限制，需要不断刷新Token，否则会导致用户认证
  • 独立使用umi的核心插件模块示例介绍
    今天我们做一个有趣的尝试，将 umi 的核心插件模块独立出来作为另一个框架的基础架构，这里我们将它称为 konos。 介于 umi 自身的源码的独
  • Nest.js之依赖注入原理及实现过程介绍
    很久之前初学Java时就对注解及自动依赖注入这种方式感觉到不可思议，但是一直没有勇气（懒）去搞清楚。现在做前端了，发现 Nest.js 里面
  • 20个拿来就能用的JavaScript技巧分享给大家
    1. 解构魔法：轻松提取值 解构允许你轻松地从数组或对象中解包值。以下是一个例子： 1 2 3 4 const person = { name: Alice, age: 30 }; const { name, ag

  • javascript入门教程基础篇介绍

    javascript入门教程基础篇介绍
    一、 简介 1、 什么是javascript JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言

  • 手把手教你从0搭建前端脚手架的全部详细教程

    手把手教你从0搭建前端脚手架的全部详细教程
    先来看一眼实现的效果。 从图上来看这个脚手架的功能非常的简单只有一个创建的命令，其他都是帮助和显示版本号的。 也就是上图这句，
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计