在vue项目中使用百度地图，点击或搜索打点组件封装

发布时间：2026/7/8 8:26:13

在vue项目中使用百度地图，点击或搜索打点组件封装

一、在index.html文件中引入百度地图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 2 BMap Demo</title><script src="https://api.map.baidu.com/api?v=3.0&amp;ak=你的_KEY"></script>
</head>
<body><div id="app"></div><script src="/dist/build.js"></script>
</body>
</html>

二、创建map.vue地图组件

<template><div class="bmap-search-marker"><input type="text" v-model="keyword" placeholder="请输入关键字"><button @click="search">搜索</button><div ref="mapContainer" class="map-container"></div><div v-if="marker"><p>经度：{{ marker.lng }}</p><p>纬度：{{ marker.lat }}</p><p>地址：{{ marker.address }}</p></div></div>
</template><script>
export default {data() {return {keyword: '',map: null,marker: null};},mounted() {// 加载地图this.loadMap();// 监听地图点击事件this.map.addEventListener("click", (e) => {this.handleMapClick(e.point);});},methods: {loadMap() {this.map = new BMap.Map(this.$refs.mapContainer);this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);const navigationControl = new BMap.NavigationControl();this.map.addControl(navigationControl);},search() {if (!this.keyword) return;// 创建LocalSearch实例const localSearch = new BMap.LocalSearch(this.map, {onSearchComplete: (results) => {if (localSearch.getStatus() === BMAP_STATUS_SUCCESS) {const poi = results.getPoi(0);// 清除之前的标记if (this.marker) {this.map.removeOverlay(this.marker);}// 创建新的标记const marker = new BMap.Marker(poi.point);this.map.addOverlay(marker);this.marker = {lng: poi.point.lng,lat: poi.point.lat,address: poi.address};}}});// 发起关键字搜索请求localSearch.search(this.keyword.trim());},handleMapClick(point) {// 清除之前的标记if (this.marker) {this.map.removeOverlay(this.marker);}// 创建新的标记const marker = new BMap.Marker(point);this.map.addOverlay(marker);this.marker = {lng: point.lng,lat: point.lat,address: ''};// 根据经纬度获取地址const geoc = new BMap.Geocoder();geoc.getLocation(point, (result) => {if (geoc.getStatus() === BMAP_STATUS_SUCCESS) {this.marker.address = result.address;}});}}
};
</script><style scoped>
.map-container {width: 100%;height: 400px;
}
</style>```## 三、vue文件中使用```javascript
<template><div><map/></div>
</template><script>
import map from './map.vue';export default {components: {map}
};
</script>

相关新闻

力扣（leetcode）第551题学生出勤记录I（Python）

力扣（leetcode）第551题学生出勤记录I（Python）

551.学生出勤记录I 题目链接&#xff1a;551.学生出勤记录I 给你一个字符串 s 表示一个学生的出勤记录&#xff0c;其中的每个字符用来标记当天的出勤情况&#xff08;缺勤、迟到、到场&#xff09;。记录中只含下面三种字符&#xff1a; ‘A’&#xff1a;Absent&#xff0…

2026/7/3 8:34:13
Redis之集群脑裂

Redis之集群脑裂

redis集群没有过半机制会有脑裂问题&#xff0c;网络分区导致脑裂后多个主节点对外提供写服务&#xff0c;一旦网络分区恢复&#xff0c;会将其中一个主节点变为从节点&#xff0c;这时会有大量数据丢失。 规避方法可以在redis配置里加上参数&#xff08;这种方法不可能百分百…

2026/7/3 17:55:14
机器学习（四） -- 模型评估（4）

机器学习（四） -- 模型评估（4）

系列文章目录 机器学习&#xff08;一&#xff09; -- 概述 机器学习&#xff08;二&#xff09; -- 数据预处理&#xff08;1-3&#xff09; 机器学习&#xff08;三&#xff09; -- 特征工程&#xff08;1-2&#xff09; 机器学习&#xff08;四&#xff09; -- 模型评估…

2026/7/4 23:43:19

最新新闻

百考通的降重不是简单换词，是基于深度语义理解的学术级重构

百考通的降重不是简单换词，是基于深度语义理解的学术级重构

“查重率38.2%……” 你盯着知网/维普/学校系统的报告&#xff0c;手心冒汗。 明明一字一句自己写的&#xff0c;没复制粘贴&#xff0c;没用AI代写&#xff0c; 可为什么重复率还是这么高&#xff1f; 再仔细一看—— 标红的全是这些句子&#xff1a; “数字经济是推动高质量…

2026/7/8 8:25:47
爬虫必看！彻底解决403禁止访问、被拦截、识别伪装，Python UA伪装全套方案

爬虫必看！彻底解决403禁止访问、被拦截、识别伪装，Python UA伪装全套方案

一、前言&#xff1a;为什么你的爬虫总是被拦截&#xff1f;很多同学写爬虫&#xff0c;直接裸发请求&#xff1a;res requests.get(url)看起来代码没问题&#xff0c;但是大部分网站直接返回403 或者直接无数据。核心原因&#xff1a;requests 默认请求头的 UA 是&#xff1a…

2026/7/8 8:25:47
5步彻底解决键盘连击问题：开源神器KeyboardChatterBlocker终极指南

5步彻底解决键盘连击问题：开源神器KeyboardChatterBlocker终极指南

5步彻底解决键盘连击问题&#xff1a;开源神器KeyboardChatterBlocker终极指南 【免费下载链接】KeyboardChatterBlocker A handy quick tool for blocking mechanical keyboard chatter. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyboardChatterBlocker 还在为键…

2026/7/8 8:25:47
PMSM FOC 与 BLDC 六步法对比：3 大核心指标实测与选型指南

PMSM FOC 与 BLDC 六步法对比：3 大核心指标实测与选型指南

PMSM FOC 与 BLDC 六步法对比&#xff1a;3 大核心指标实测与选型指南在电机控制领域&#xff0c;永磁同步电机&#xff08;PMSM&#xff09;磁场定向控制&#xff08;FOC&#xff09;与无刷直流电机&#xff08;BLDC&#xff09;六步换向法是两种主流技术路线。本文将基于效率…

2026/7/8 8:25:47
各大AI陆续收费后，我终于看懂：本地边缘大模型才是未来

各大AI陆续收费后，我终于看懂：本地边缘大模型才是未来

最近不知道大家有没有发现一个很明显的变化&#xff0c;咱们平时用的豆包、通义千问、DeepSeek这些主流AI&#xff0c;基本都不搞纯粹免费那一套了。现在统一都是一个套路&#xff1a;基础功能免费凑合⽤&#xff0c;稍微用得多、用好一点就要掏钱。豆包开了专业版&#xff0c;…

2026/7/8 8:25:47
GPT训练我的第三天，明白了应该咋说满分回答！

GPT训练我的第三天，明白了应该咋说满分回答！

文章目录回顾今日训练第一题&#xff1a;执行上下文到底经历了什么&#xff1f;第一步&#xff1a;进入全局执行上下文&#xff08;GO&#xff09;第二步&#xff1a;执行到 fn() 时第三步&#xff1a;执行&#xff1a;第二题&#xff1a;作用域链问题1问题2问题3小任务&#x…

2026/7/8 8:25:22

日新闻

DALL·E 3 vs DALL·E 2 API 对比：3 大核心差异与 5 项成本/效果实测

DALL·E 3 vs DALL·E 2 API 对比：3 大核心差异与 5 项成本/效果实测

DALLE 3 与 DALLE 2 API 深度评测&#xff1a;技术决策者的5维选择指南当我们需要在项目中集成AI图像生成能力时&#xff0c;OpenAI提供的DALLE系列API往往是最先考虑的选择。但面对DALLE 3和DALLE 2这两个版本&#xff0c;技术决策者常常陷入选择的困境。本文将通过超过50组对…

2026/7/8 0:00:15
高德地图 JS API 2.0 海量标注优化：3500+数据下首屏加载提速4倍实战

高德地图 JS API 2.0 海量标注优化：3500+数据下首屏加载提速4倍实战

高德地图JS API 2.0海量标注性能优化实战&#xff1a;从3500数据卡顿到丝滑渲染的完整方案当我们在Web应用中集成高德地图并需要展示大量标注时&#xff0c;性能问题往往会成为开发者的噩梦。特别是在数据量超过3500条时&#xff0c;传统的标注渲染方式会导致首屏加载缓慢、交互…

2026/7/8 0:00:15
PROPKA 3深度解析：蛋白质pKa预测的实战指南与算法原理

PROPKA 3深度解析：蛋白质pKa预测的实战指南与算法原理

PROPKA 3深度解析&#xff1a;蛋白质pKa预测的实战指南与算法原理 【免费下载链接】propka PROPKA predicts the pKa values of ionizable groups in proteins and protein-ligand complexes based in the 3D structure. 项目地址: https://gitcode.com/gh_mirrors/pr/propka…

2026/7/8 0:00:15

周新闻

3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略

3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略

3步彻底解决Windows右键菜单混乱问题&#xff1a;ContextMenuManager使用全攻略 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾为Windows右键菜单中那些…

2026/7/7 3:16:03
GXDE OS下Wayland兼容性实战：从deepin-mutter原理到VMware Tools修复

GXDE OS下Wayland兼容性实战：从deepin-mutter原理到VMware Tools修复

如果你正在用 GXDE OS 或者任何基于 Deepin 的发行版&#xff0c;并且遇到了“检测到窗口系统采用 Wayland 协议&#xff0c;程序即将退出”这类弹窗&#xff0c;或者发现 VMware Tools 在 Ubuntu 24.04 这类默认 Wayland 的系统上启动失败&#xff0c;那这篇文章就是为你准备的…

2026/7/8 6:43:33
企业AI落地困境与AgenticOps实践指南

企业AI落地困境与AgenticOps实践指南

1. 企业AI落地的现实困境与破局之道过去两年&#xff0c;大模型技术呈现爆发式增长&#xff0c;从GPT-3到GPT-4&#xff0c;从LLaMA到DeepSeek&#xff0c;模型参数规模从百亿级跃升至万亿级&#xff0c;多模态能力从单一文本扩展到图文音视频的综合处理。然而在企业应用层面&a…

2026/7/7 7:05:11

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/6 23:28:09
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/8 1:45:14
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/6 21:42:32