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

最新推荐文章于 2024-06-24 14:25:44 发布
最新推荐文章于 2024-06-24 14:25:44 发布
阅读量1k 收藏
点赞数
文章标签： 前端 vue.js 百度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60796787/article/details/126609964
版权

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

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

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

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

 

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

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

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

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

小李不吃柠檬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue +百度地图2-标点（也许待改进
weixin_58412143的博客
03-14 557
1、一张图添加多个点。
vue + 百度地图 +点位标注
weixin_46392266的博客
04-22 6422
在项目中插入百度地图，并标注符合条件的企业点位 1、template： <template> <!-- 地图 --> <div class="map bottom-content"> <div id="school-container" style="height:100%;position: relative;"></div> </div> </template> 2、script <sc
使用百度地图API加载文件标注点位的方法
最新发布
驯龙高手_追风的博客
06-24 631
文档，粘贴下述代码后，修改代码中“ak=您的AK"”为2.1节中您个人申请的百度地图AK:；点击右下角“选择文件”，加载上述的EXCEL文件即可。注册个人账户，获取百度地图AK(密钥)右上角还可以切换背景为“卫星地图”步骤3：用浏览器打开。
vue百度地图打点和标注
qq_35478008的博客
03-31 2204
public文件下的index.html，加入以下代码。2.在main.js文件中导入，并全局定义。1.下载 vue-baidu-map。3.去掉百度logo。
vue、百度地图
weixin_30698527的博客
11-28 68
点击页面中的位置，跳转到百度地图，并且根据经纬度定位到具体位置 打开 百度地图开放平台 |百度地图API SDK | 地图开发 获取 密钥ak 页面中在位置的地方添加一个点击事件 <div class="lxdz_nr" @click = "baidu(116.442208,39.922129)"> //具体的经纬度，可以直接写在这里，也可以写给地址的位置 ...
在vue中给百度地图添加多个标点
weixin_72127453的博客
06-26 2185
添加多个标点
百度地图标点实现vue
兔子零
03-17 3624
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
详解vue项目中调用百度地图API使用方法
10-17
在Vue项目中集成百度地图API是一项常见的需求，可以用于实现地理位置相关的功能，如地图展示、定位、导航等。本文将详细讲解如何在Vue项目中调用百度地图API，包括申请密钥、引入API、配置Webpack、创建地图对象及在...
百度地图api实现运动轨迹、坐标拾取、多点标注并显示信息窗体
12-22
1. **获取多个坐标点标注在地图上**：在网页上显示地图时，我们可能需要在地图上标出多个地点。百度地图API提供了一个名为`Marker`的类，用于创建地图上的标记。通过实例化`Marker`对象，并设置其坐标属性（经纬度）...
如何在vue中使用百度地图添加自定义覆盖物（水波纹）
01-22
具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物。实现的过程作者分为以下两点给大家介绍介绍。 水波紋的实现 自定义覆盖物的实现 水波紋的实现 这个需求的实现肯定是离不开我们自己写...
vue使用百度离线地图资源
04-25
vue使用百度地图离线资源 该文件内容须放于项目public文件夹下 使用请参考博主博客：vue使用百度地图----离线地图 https://blog.csdn.net/weixin_45660840/article/details/108977917?spm=1001.2014.3001.5502 H.F...
百度地图定位、标注、选择位置
01-14
基于百度sdk的一套程序，可以定位到当前位置，在地图上标注当前位置。可以手动在地图上选择点，点击标注，获取标注的信息。http://blog.csdn.net/wangkaichenjuan/article/details/50515504
百度地图自定义标注
07-05
实现了百度地图自定义标注，标注可以定义自己想要的图片。达到了和百度marker点击后弹出信息窗口的效果，里面有例子，和相应的图片共大家学习。
百度地图应用，动态加载数据。
11-28
百度地图应用，有坐标转换，获取定位，点位的坐标和建筑物，动态加载数据。
vue实现百度地图打点自定义div显示内容
CodingNoob
04-01 3909
<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开发百度地图标记使用＜bm-marker＞遇到改变标记数组元素，标记不及时动态刷新标记位置信息和元素下标。
weixin_46567616的博客
02-22 2013
前端vue开发百度地图标记使用遇到改变标记数组元素，不会动态刷新标记位置信息和元素下标。
vue引入百度地图使用JavaScript API GL渲染点位的图片
m0_60796787的博客
08-30 564
2.首先在提交图片的时候就要给一个判断的状态，这样当我们拿到数据的时候直接else if进行判断就可以了 判断完之后把你的类名直接放在图片显示的地方 直接看代码。1.上一章说了怎么动态的渲染点位，那么根据需求来说应该会做根据点位状态的不同 点位的图片也应该不同 提交图片的话就不说了直接说怎么渲染。修改一下上传的图片大小就行，也可以直接修改myIcon里面的new BMapGL.size里面的值 就可以解决了。因为你要动态的循环 所以必须放在一个循环里面 从而保证能渲染到每一个图片，否则只能渲染一个点位。..
vue项目使用百度地图经验，怎么引入JavaScript API和使用，以及访问web服务端API遇跨域问题
qq_43468165的博客
09-30 1722
适用于中级使用者：对百度地图的使用和应用创建有了解过的。主要是说明在vue中如何使用，怎么引入JavaScript API和使用，以及访问web服务端API遇跨域问题。 实现效果：页面里面获得天气信息 思路：就是获得城市定位后->根据城市编码获得天气。 申请账号咱们不赘述，在控制台应用管理里面创建应用，主要是为了获取AK 一、JavaScript API的使用，与项目的结合度较高，需要通过yarn或者npm导入依赖包 1.在vue里面引入百度地图 yarn add vue..
vue2+百度地图（多个标记点+信息窗体）
Jdanne的博客
05-10 603
1、安装Vue Baidu Map。2、在main.js引入。3、vue文件的具体代码。
JavaScript API GL腾讯地图在vue中编辑与绘制
06-13
将JavaScript API GL集成到Vue.js应用程序中的过程与将其集成到任何其他Web应用程序中的过程类似。以下是一些简单的步骤： 1. 在Vue.js应用程序中安装JavaScript API GL。可以使用npm或yarn进行安装。同时，需要通过script标签引入腾讯地图JavaScript API。 ``` <script src="//map.qq.com/api/js?v=2.exp&key=[您申请的key值]&libraries=convertor"></script> ``` 2. 创建一个Vue.js组件，将JavaScript API GL集成到该组件中。可以在Vue.js组件的生命周期钩子中初始化地图并添加绘图代码。 ``` <template> <div ref="mapContainer" class="map-container"></div> </template> <script> export default { data() { return { map: null, drawingManager: null } }, mounted() { this.initMap(); this.initDrawingManager(); }, methods: { initMap() { const map = new qq.maps.Map(this.$refs.mapContainer, { center: new qq.maps.LatLng(39.916527, 116.397128), zoom: 13 }); this.map = map; }, initDrawingManager() { const drawingManager = new qq.maps.drawing.DrawingManager({ drawingMode: qq.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: qq.maps.ControlPosition.TOP_CENTER, drawingModes: [ qq.maps.drawing.OverlayType.MARKER, qq.maps.drawing.OverlayType.CIRCLE, qq.maps.drawing.OverlayType.POLYGON, qq.maps.drawing.OverlayType.POLYLINE, qq.maps.drawing.OverlayType.RECTANGLE ] }, circleOptions: { fillColor: qq.maps.Color.fromHex('#000000', 0.5), strokeColor: qq.maps.Color.fromHex('#000000', 0.8), strokeWeight: 2 } }); drawingManager.setMap(this.map); this.drawingManager = drawingManager; } } } </script> ``` 在这个例子中，我们创建了一个简单的Vue.js组件，用于在Web应用程序中集成JavaScript API GL。组件中包含一个div元素，用作地图容器。在组件的mounted生命周期钩子中，我们初始化了地图并添加了绘图代码。我们还添加了一个方法`initDrawingManager()`用于初始化绘图工具。 3. 在Vue.js组件中设置JavaScript API GL的属性和事件处理程序。这些属性和事件处理程序可用于控制绘图和响应用户的交互行为。 在这个例子中，我们在`initDrawingManager()`方法中设置了绘图工具的属性和事件处理程序。 希望这可以帮助您开始在Vue.js应用程序中使用JavaScript API GL和腾讯地图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值