vue引入百度地图使用地图的JavaScript API GL 实现在地图上标注点位

最新推荐文章于 2025-05-21 08:30:00 发布
最新推荐文章于 2025-05-21 08:30:00 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端 vue.js 百度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60796787/article/details/126609964
本文针对前端新手介绍如何使用百度地图API。主要内容包括：如何引入地图、添加标记点、获取经纬度并提交数据到后台，以及如何从后台获取数据并在地图上渲染。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本文章针对于不会看文档的小白、刚毕业参加工作的前端朋友们。

1.首先要引入百度地图 具体流程上个文章有。

2.根据官网的demo引入 (官网的不太详细，可以根据自己需求引入)我这里就展示一部分代码。

主要是通过map.addOverlay(你的类名) 来向地图添加点位。通过监听map的点击事件可以获取到经纬度 这样就可以在添加完点位之后将经纬度传到后台

 

 3.将数据提交到后台之后就应该考虑怎么把数据渲染到咱们的地图上 这个需要把文档看懂，不然做起来很费劲。先将数据从后台请求回来之后放到一个数组里面 然后进行循环 具体操作直接看代码

4. 将数组进行循环 然后直接放在这个pt里面就可以了 操作很简单 重要的是要把文档看懂。

看看效果图 渲染icon图标的话咱们下一章见

 谢谢观看主要是针对小白 大佬勿喷

Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 4429
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
百度地图API自定义覆盖物与添加点击事件
热门推荐
corey_jk的专栏
12-21 3万+
本文适合零基础百度地图API开发者 效果图1 效果图2 直接上代码；另注：code上面很多是钓鱼君自己写的动态的数据，所以不能拿过去马上可以用，本文只提供借鉴，不保证100%原创，但功能是修改之后已经实现。欢迎找茬，欢迎指教。 var basePath = ''; var map = new BMap.Map("container");
vue +百度地图2-标点（也许待改进
weixin_58412143的博客
03-14 639
1、一张图添加多个点。
vue引入百度地图使用JavaScript API GL渲染点位的图片
m0_60796787的博客
08-30 632
2.首先在提交图片的时候就要给一个判断的状态，这样当我们拿到数据的时候直接else if进行判断就可以了 判断完之后把你的类名直接放在图片显示的地方 直接看代码。1.上一章说了怎么动态的渲染点位，那么根据需求来说应该会做根据点位状态的不同 点位的图片也应该不同 提交图片的话就不说了直接说怎么渲染。修改一下上传的图片大小就行，也可以直接修改myIcon里面的new BMapGL.size里面的值 就可以解决了。因为你要动态的循环 所以必须放在一个循环里面 从而保证能渲染到每一个图片，否则只能渲染一个点位。..
【vue baiduMap】实现百度地图，多个标记点，自定义信息窗口样式
最新发布
weixin_41747256的博客
05-21 643
【代码】【vue baiduMap】实现百度地图，多个标记点，自定义信息窗口样式。
vue中引入百度地图，并添加点线面，标注信息
king_sur的博客
12-24 2261
vue中引入百度地图，绘制点线面
vue + 百度地图 +点位标注
weixin_46392266的博客
04-22 6608
在项目中插入百度地图，并标注符合条件的企业点位 1、template： <template> <!-- 地图 --> <div class="map bottom-content"> <div id="school-container" style="height:100%;position: relative;"></div> </div> </template> 2、script <sc
vue百度地图打点和标注
qq_35478008的博客
03-31 2440
public文件下的index.html，加入以下代码。2.在main.js文件中导入，并全局定义。1.下载 vue-baidu-map。3.去掉百度logo。
Vue使用百度地图实现聚合的效果(vue-baidu-map)
weixin_44021888的博客
01-29 1215
Vue使用百度地图实现聚合的效果(vue-baidu-map)
百度地图 海量点实现，并标注label ,并根据多个点位设置显示中心区域
qq_23744567的博客
04-01 2449
百度地图 海量点实现，并标注label ,并根据多个点位设置显示中心区域 说明：此案例用于vue项目，注意标注点经纬度根据你所使用的地图来转换 第一步：引入百度地图js 实现效果：展示多个点位(此案例用marker划点位)，并标注label ,并根据多个点位设置显示中心区域 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=自己的ak"></script> 第二步：引入插件 <sc
百度地图MarkerClusterer卡顿问题
08-06
在使用百度地图API进行开发时，特别是在处理大量Marker（标注）的时候，可能会遇到性能问题，导致地图操作卡顿。这主要是因为每个Marker都是一个独立的DOM元素，当数量过多时，浏览器需要处理的渲染任务就会变得繁重...
百度地图定位、标注、选择位置
01-14
基于百度sdk的一套程序，可以定位到当前位置，在地图上标注当前位置。可以手动在地图上选择点，点击标注，获取标注的信息。http://blog.csdn.net/wangkaichenjuan/article/details/50515504
百度地图自定义标注
07-05
实现了百度地图自定义标注，标注可以定义自己想要的图片。达到了和百度marker点击后弹出信息窗口的效果，里面有例子，和相应的图片共大家学习。
百度地图应用，动态加载数据。
11-28
百度地图应用，有坐标转换，获取定位，点位的坐标和建筑物，动态加载数据。
vue、百度地图
weixin_30698527的博客
11-28 116
点击页面中的位置，跳转到百度地图，并且根据经纬度定位到具体位置 打开 百度地图开放平台 |百度地图API SDK | 地图开发 获取 密钥ak 页面中在位置的地方添加一个点击事件 <div class="lxdz_nr" @click = "baidu(116.442208,39.922129)"> //具体的经纬度，可以直接写在这里，也可以写给地址的位置 ...
在vue中给百度地图添加多个标点
weixin_72127453的博客
06-26 2553
添加多个标点
百度地图标点实现vue
兔子零
03-17 3708
infowindow 多窗口我不会,有大佬会的.希望可以教教我! vue代码如下: &lt;template&gt; &lt;!--地图容器--&gt; &lt;div id="XSDFXPage" class="XSDFXPage"&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; export defaul
百度地图（BMap）设置标点，显示信息【vue】
qq_22841387的博客
12-16 5857
在现代网页应用中，地图组件的使用越来越普遍。Baidu Map API 是一个强大的地图服务工具，可以帮助开发者快速集成地图功能。本文将详细介绍如何使用 Baidu Map API 创建标记点（`bm-marker`）和信息窗口（`bm-info-window`），并提供实现这些功能的代码示例。
vue实现百度地图打点自定义div显示内容
CodingNoob
04-01 4201
<template> <div class="bmap-layout"> <tipsBar/> <div class="unit" v-if="mapType == 'heat'"> <div class="unitItem"> <span class="text">锅炉房：</span> <span class="isNum">{{dataSys.guoLuF...
Vue中使用百度地图实现自定义覆盖物：水波纹效果详解
在Vue项目中使用百度地图添加自定义覆盖物，特别是实现水波纹效果，通常需要结合HTML、CSS以及JavaScript技术。首先，我们需要引入百度地图API，确保地图功能的正常工作。在Vue组件中，可以使用`<script>`标签或者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值