vue3+vue-baidu-map-3x 实现地图定位

文档地址:一个是2一个是3

https://dafrok.github.io/vue-baidu-map/#/zh/index

vue-baidu-map-3x

1.首先要到百度地图开放平台上建一个账号,如果有百度账号可以直接登录百度地图-百万开发者首选的地图服务商,提供专属的行业解决方案

2.点击控制台,完善信息

3.信息完善之后,打开的是这个页面(我这里完善的信息选择的是个人)

4.然后点击应用管理下的我的应用,此时打开的页面如果已有应用可以直接用那个ak值,如果没有请点击创建应用,根据自己的需要进行选择生成,第三张图片上的白名单,如果本地跑的话可以直接输入*,但要注意上线之后改掉,创建好后就有一个ak啦,一会在代码里把这个ak粘进去就可以啦

5,程序:我这里用了两个功能,一个是定位,一个是搜索

先安装

pnpm install vue-baidu-map-3x --save

html

<!-- 百度地图 --><baidu-mapclass="map"ak="L3on1qvFT4RG1weFYRIxGbG8WOXpqzAi"v="3.0"type="API":zoom="15":center="centerVal"><!-- 定位 --><bm-geolocationanchor="BMAP_ANCHOR_BOTTOM_RIGHT":show-address-bar="true":auto-location="true"@locationSuccess="successFn"@locationError="errorFn"/><!-- 自定义组件 --><bm-control><a-input-searchv-model:value="addressSear"placeholder="请输入地点"enter-button="搜索"size="large"@search="onSearch"/></bm-control></baidu-map>

script

<script lang="ts">import { defineComponent, ref } from 'vue';import { BaiduMap, BmGeolocation, BmControl } from 'vue-baidu-map-3x';export default defineComponent({name: 'a',components: { BaiduMap, BmGeolocation, BmControl },emits: ['success'],setup(props, { emit }) {//搜索框内容const addressSear = ref('');// 百度地图默认定位const centerVal = ref('北京');// 定位存储的位置const positonStr = ref('');// 搜索框-赋值,让地图跟着变化const onSearch = () => {centerVal.value = addressSear.value;};// 定位失败const errorFn = () => {alert('定位失败');};// 定位成功const successFn = (e: any) => {// 定位赋值positonStr.value =e.addressComponent.province +e.addressComponent.city +e.addressComponent.district +e.addressComponent.street +e.addressComponent.streetNumber;};return { errorFn, successFn, addressSear, centerVal, onSearch };},});

完整程序

<template><........><!-- 百度地图 --><baidu-mapclass="map"ak="L3on1qvFT4RG1weFYRIxGbG8WOXpqzAi"v="3.0"type="API":zoom="15":center="centerVal"><!-- 定位 --><bm-geolocationanchor="BMAP_ANCHOR_BOTTOM_RIGHT":show-address-bar="true":auto-location="true"@locationSuccess="successFn"@locationError="errorFn"/><!-- 自定义组件 --><bm-control><a-input-searchv-model:value="addressSear"placeholder="请输入地点"enter-button="搜索"size="large"@search="onSearch"/></bm-control></baidu-map></.............>
</template>
<script lang="ts">import { defineComponent, ref } from 'vue';import { BaiduMap, BmGeolocation, BmControl } from 'vue-baidu-map-3x';export default defineComponent({name: '.........',components: { BaiduMap, BmGeolocation, BmControl },emits: ['success'],setup(props, { emit }) {.................//搜索绑定变量const addressSear = ref('');//定位, 可使用如“广州市海珠区”的地区字符串,也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度const centerVal = ref('北京');// 定位按钮的当前位置const positonStr = ref('');// 弹窗保存async function handleSubmit() {if (!positonStr.value) {positonStr.value = centerVal.value;}emit('success', positonStr.value);........}// 搜索框const onSearch = () => {centerVal.value = addressSear.value;};// 定位失败const errorFn = () => {alert('定位失败');};// 定位成功const successFn = (e: any) => {// 定位赋值positonStr.value =e.addressComponent.province +e.addressComponent.city +e.addressComponent.district +e.addressComponent.street +e.addressComponent.streetNumber;};return {  handleSubmit, errorFn, successFn, addressSear, centerVal, onSearch };},});
</script>
<style scoped>.map {width: 100%;height: 300px;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/455940.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

V2X介绍

文章目录 什么是V2XV2X的发展史早期的DSRC后起之秀C-V2XC-V2X 和DSRC 两者的对比 什么是V2X 所谓V2X&#xff0c;与流行的B2B、B2C如出一辙&#xff0c;意为vehicle to everything&#xff0c;即车对外界的信息交换。车联网通过整合全球定位系统&#xff08;GPS&#xff09;导…

C#使用log4net结合sqlite数据库记录日志

0 前言 为什么要把日志存到数据库里? 因为结构化的数据库存储的日志信息,可以写专门的软件读取历史日志信息,通过各种条件筛选,可操作性极大增强,有这方面需求的开发人员可以考虑。 为什么选择SQLite? 轻量级数据库,免安装,数据库的常用的基本功能都有,可以随程序…

如何打开/解包星露谷物语XNB文件(附软件资源)

一、什么是 XNB 文件&#xff1f; 游戏将数据、地图和纹理存储在 .xnb 这种压缩数据文件中&#xff0c;它们在游戏的 Content 文件夹中。例如&#xff0c;对话期间显示的阿比盖尔的头像来自这个文件&#xff1a; Content\Portraits\Abigail.xnb。解包这个文件&#xff0c;你会…

SIP 业务举例之 Call Forwarding - No Answer(无应答呼叫转移)

目录 1. Call Forwarding - No Answer 简介 2. RFC5359 的 Call Forwarding - No Answer 信令流程 呼转开始 呼转完成 3. Call Forwording - No Answer 过程总结 博主wx:yuanlai45_csdn 博主qq:2777137742 想要 深入学习 5GC IMS 等通信知识(加入 51学通信),或者想要 …

ISO21434 信息安全开发流程咨询合规内容和步骤

ISO 21434是汽车网络安全风险管理的一项国际标准&#xff0c;旨在帮助汽车制造商和供应商识别、评估和管理车辆整个生命周期中的网络安全风险。以下是ISO 21434咨询可能包含的内容以及实施咨询的方法论步骤&#xff1a; 咨询内容&#xff1a; 标准解读与培训&#xff1a;帮助…

【Unity】Unity中文本中插入超链接且可点击响应,TextMeshPro的进阶用法

一、需求和尝试 今天遇到这样一个需求&#xff1a;在文本中插入超链接&#xff0c;且这个链接可以点击跳转对应的url&#xff0c;具体形式如下图所示。 其实这个有一个简单粗暴的方法&#xff0c;就是把需要加超链接的文本单独拿出来&#xff0c;和其他文本进行拼接&#xf…

【数据结构与算法】之队列详解

队列&#xff08;Queue&#xff09;是一种重要的线性数据结构&#xff0c;遵循先进先出、后进后出的原则。本文将更详细地介绍队列的概念、特点、Java 实现以及应用场景。 模运算小复习&#xff1a; a % b 的值总是小于b 5 % 4 1 5 % 2 1 1 % 5 1 4 % 5 4 1. 队列…

windows|常见的文件伪装方法

几种常见的文件伪装方法&#xff1a; 扩展名伪装unicode字符伪装压缩包伪装隐写术 方法仅限于学习目的&#xff0c;不用于任何恶意或非法用途。 ———— 一、扩展名伪装&#xff1a;假装是另一种类型的文件 修改文件的扩展名&#xff0c;使得文件看起来像其他类型的文件&a…

取消element-ui中账号和密码登录功能浏览器默认的填充色,element-ui登录账号密码输入框禁用浏览器默认填充色问题

标题 问题展示 修改后 <div class="loginForm"><el-formref="formB":model="formDataB":rules="rulesB"class="login-form"label-position="left"><el-form-item prop="userNo" clas…

CentOS 7(Linux)详细安装教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 一、CentOS镜像的下载&#xff08;准备工作&#xff09; 我选择的是其他镜像源的下载地址&#xff1a; Index of /centos-vault/7.6.1810/isos/x86_64/ | 南阳理工学院开源镜…

u盘装win10系统提示“windows无法安装到这个磁盘,选中的磁盘采用GPT分区形式”解决方法

我们在u盘安装原版win10 iso镜像时&#xff0c;发现在选择硬盘时提示了“windows无法安装到这个磁盘,选中的磁盘采用GPT分区形式”&#xff0c;直接导致了无法继续安装下去。出现这种情况要怎么解决呢&#xff1f;下面小编分享u盘安装win10系统提示“windows无法安装到这个磁盘…

Android Gradle

#1024程序员节&#xff5c;征文# Gradle 是一款强大的自动化构建工具&#xff0c;广泛应用于 Android 应用开发。它通过灵活的配置和丰富的插件系统&#xff0c;为项目构建提供了极大的便利。本文只是简单的介绍 Gradle 在 Android 开发中的使用&#xff0c;包括其核心概念、构…

智联招聘×Milvus:向量召回技术提升招聘匹配效率

01. 业务背景 在智联招聘平台&#xff0c;求职者和招聘者之间的高效匹配至关重要。招聘者可以发布职位寻找合适的人才&#xff0c;求职者则通过上传简历寻找合适的工作。在这种复杂的场景中&#xff0c;我们的核心目标是为双方提供精准的匹配结果。在搜索推荐场景下&#xff0c…

【分立元件】电阻的额定电压和最高电压

在文章:【分立元件】贴片电阻的额定功率中我们讲到使用电阻器时,不仅要注意额定功率,还要注意电压相关的一些项目。 本文我们将对与电阻基本参数关联的额定电压和元件最高电压这两个术语及其定义(包括它们之间的关系)进行解说。 额定电压 如下所示国巨片式电阻规…

ARM学习(33)英飞凌(infineon)PSOC 6 板子学习

笔者来聊一下psoc62 系列板子的知识 1、PSOC62板子介绍 Psoc6-evaluationkit-062S2 与RT-Thread联合推出的一款32位的双core的板子&#xff0c;基于CortexM4以及CortexM0。 管脚兼容Arduio。板载DAP-Link&#xff0c;可以支持调试以及串口&#xff0c;无需外接2MB的Flash以及…

Java 开发——(下篇)从零开始搭建后端基础项目 Spring Boot 3 + MybatisPlus

上篇速递 - Spring Boot 3 MybatisPlus 五、静态资源访问 1. 基础配置 在 Spring Boot 中访问静态资源非常方便。Spring Boot 默认支持从以下位置加载静态资源&#xff1a; /META-INF/resources//resources//static//public/ 这些目录下的文件可以直接通过 URL 访问。 例…

【python实操】python小程序之参数化以及Assert(断言)

引言 python小程序之参数化以及Assert&#xff08;断言&#xff09; 文章目录 引言一、参数化2.1 题目2.2 代码2.3 代码解释 二、Assert&#xff08;断言&#xff09;2.1 概念2.1.1 Assert语句的基本语法&#xff1a;2.1.2 基本断言2.1.3 断言函数参数2.1.4 断言前后状态一致 2…

【计网】从零开始认识IP协议 --- 理解网段划分,NAT策略,私有IP和公网IP,认识公网

任何收获都不是偶然&#xff0c; 一点一滴的进步终会让未来的你焕然一新&#xff01; 从零开始认识IP协议 1 为什么要进行网段划分2 特殊IP地址与数量限制3 私有IP和公网IP4 彻底理解网段划分5 认识公网 1 为什么要进行网段划分 我们以一个例子来讲解为什么要进行网段划分&a…

Java【多线程】单例模式

目录 单例模式 饿汉模式 懒汉模式 懒汉模式-多线程版 单例模式 单例模式是一种设计模式 设计模式相当于棋谱 棋谱&#xff0c;大佬把一些对局整个推演过程&#xff0c;写出来 设计模式&#xff0c;是属于程序员的棋谱 单例模式&#xff08;单个实例/对象&#xff09;&…

sqli-labs靶场安装以及刷题记录-docker

sqli-labs靶场安装以及刷题记录-docker sqli-labs靶场安装-dockersqli-labs靶场刷题less-1 单引号less-2 数字型less-3 单引号括号less-4 双引号括号less-5 单引号布尔盲注less-6 双引号布尔盲注less-7 单引号加括号、输出到文件less-8 单引号布尔盲注less-9 单引号时间盲注les…