vue使用百度地图，添加线路、站点，简易封装，方便修改(vue使用百度地图实现添加多条线路、多个站点)
效果图如下：
1.百度地图安装设置好ak以后， 以全局安装为例，百度地图的安装设置使用，
详见上文：
vue项目中使用百度地图，详细过程_北城笑笑的博客-CSDN博客_vue使用百度地图vue项目中使用百度地图，过程详细https://blog.csdn.net/weixin_65793170/article/details/127839712?spm=1001.2014.3001.5502
2.直接在vue页面使用，配置相关属性，如下：
<baidu-mapclass="bm-view":center="center":zoom="zoom":scroll-wheel-zoom="scrollZoom"NavigationControlType="BMAP_NAVIGATION_CONTROL_LARGE"@ready="mapReady"><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
</baidu-map>
3. 定义相关数据：
// 定义地图数据BMap: "",map: "",center: { lng: 118.904, lat: 31.915 },//中心坐标centerPoint: { lng: 118.904, lat: 31.915 },zoom: 11, //初始缩放比scrollZoom: true,//允许鼠标滚轮缩放//折线颜色和标注iconcolorAndIcon: [{ lineColor: "#b083fb", icon: require("@/assets/ccle.png") },{ lineColor: "#b08xab", icon: require("@/assets/bus.png") },],//线路坐标信息lineMapList: [],//站点坐标信息stationMapList: [],4、初始化
//地图默认方法mapReady({ BMap, map }) {this.BMap = BMap;this.map = map;this.drawMap();//适当地方调用// 点击地图添加监听事件获取经纬度map.addEventListener("click", (e) => {// console.log(e.point.lng, e.point.lat);//......});//给地图添加鼠标移动事件map.addEventListener("mousemove", (e) => {//......});},
5、绘制地图
drawMap() {let BMap = this.BMap;let map = this.map;let data = this.lineMapList; //线路let data2 = this.stationMapList; //站点// 这里是数据改变时，地图中心点定位到当前第一条数据的第一个坐标点或者默认的中心坐标// let point = data.length && data[0].length ? data[0][2] : this.centerPoint;// this.center = { lng: point.lng, lat: point.lat };// 线路坐标信息 数据类型：数组包数组for (let i = 0; i < data.length; i++) {let points = [];for (let j = 0; j < data[i].length; j++) {points.push(new BMap.Point(data[i][j].lng, data[i][j].lat));}this.addPolyline(BMap, map, data, points, i);//调用添加折线方法}// 站点坐标信息 数据类型：数组包对象for (let i = 0; i < data2.length; i++) {let points = [];points.push(new BMap.Point(data2[i].lng, data2[i].lat));this.addStation(BMap, map, data2, points, i);//调用添加站点方法}},6、添加折线
//添加折线
addPolyline(BMap, map, data, points, index) {let _this = this; //注意this的使用let polyline = "";// 创建折线polyline = new BMap.Polyline(points, {enableEditing: false, // 是否启用线编辑，默认为false// 设置折线颜色,可以设置不同颜色线路，需要自己定义strokeColor: this.colorAndIcon[0].lineColor, strokeWeight: 9, // 折线宽度strokeOpacity: 1, // 折线透明度});map.addOverlay(polyline); // 将折线添加到地图//折线点击事件polyline.addEventListener("click", function (e) {//......});for (let j = 0; j < points.length; j++) {this.addMarker(BMap,map,new BMap.Point(data[index][j].lng, data[index][j].lat),j + 1,index);}},//添加icon和标识addMarker(BMap, map, point, number, index) {let marker = "";//线体坐标点let label = "";//icon上的文字let myIcon = new BMap.Icon(//也可以设置不同坐标点上的icon，需要自己定义this.colorAndIcon[0].icon, new BMap.Size(30, 30), //图标可视区域大小{ anchor: new BMap.Size(8, 8) } //图标定位点相对于图标左上角的偏移量);myIcon.setImageSize(new BMap.Size(15, 15)); // 设置icon大小marker = new BMap.Marker(point, { icon: myIcon }); // 创建图像标注map.addOverlay(marker); // 将标注添加到地图//icon标识内容位置label = new BMap.Label(number, { offset: new BMap.Size(3, 0) });// 文本标识样式label.setStyle({fontWeight: 600,fontSize: "8px",color: "white",backgroundColor: "0",border: 0,});marker.setLabel(label); // 为icon添加文本标识},7、添加站点
//站点数据处理 逻辑同上addStation(BMap, map, data, points, index) {for (let j = 0; j < points.length; j++) {this.addStationMarker(BMap,map,new BMap.Point(data[index].lng, data[index].lat),j + 1,index);}},//添加站点标注addStationMarker(BMap, map, point, number, index) {let marker = "";let myIcon = new BMap.Icon(this.colorAndIcon[1].icon,new BMap.Size(30, 30),{ anchor: new BMap.Size(8, 8) });myIcon.setImageSize(new BMap.Size(18, 18)); marker = new BMap.Marker(point, { icon: myIcon }); map.addOverlay(marker);},
创作不易，感觉有用就一键三连，点赞、收藏加关注
vue使用百度地图，添加线路、站点，简易封装，方便修改(vue使用百度地图实现添加多条线路、多个站点)相关推荐
- visual studio（vs）2022如何在解决方案中自动配置文件路径（如何向解决方案中批量添加文件）（如何将修改路径之后的的源文件添加到解决方案中）
之前我写代码都是用的这种结构↑,解决方案里包含源文件头文件两个筛选器,然后里面放着不同的文件. 但是今天我一个笔记文件显得特别杂乱,所有.c和.h文件都堆在一起(比如说学数据结构的文件,顺序表链表栈树 ...
- ant-design vue input通过那个事件可以获得输入框变化的值_VUE使用百度地图教程
VUE使用百度地图教程 简介:传统的百度地图如果搭建在vuecli中就还需要再index.html的文件还需要配置script参数,这样使用起来就像是穿了一件不合身的衣服,总是难受,而且vue也不推荐 ...
- 百度地图JavaScript API GL—简易行政区划图层
map开发 百度地图JavaScript API GL-简易行政区划图层 administrator 2022年6月6日 简易行政区划图层 更新时间:2022年3月12日 简介 DistrictLay ...
- H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）
一.API基本使用 1.1 大致流程 打开,百度地图官网 登录或者注册一个百度账号,并完成相关验证 登陆并申请成为开发者 在百度地图开发平台的首页选择控制台,在控制台中创建应用 创建好应用以后就能在控 ...
- 百度商桥放在php网站哪里_怎么在自己的网站上添加百度商桥？最详细的版本！...
在分享怎么在自己的网站上添加百度商桥之前,先和大家分享下什么是"百度商桥",简单的说"百度商桥"是百度旗下的一款产品,它的最大作用就可以帮助网站实现访客即时沟通 ...
- 移动端百度地图多点标注php,PHP学习：php+js实现百度地图多点标注的方法
<PHP学习:php+js实现百度地图多点标注的方法>要点: 本文介绍了PHP学习:php+js实现百度地图多点标注的方法,希望对您有用.如果有疑问,可以联系我们. PHP教程 PHP教程 ...
- JSAPI 高德地图应用--线路规划、多条线路同时展示
在地图应用中,常见的应用之一应该就有查询两个地方的线路规划吧,高德地图提供了驾车路线规划.货车路线规划.公车换乘服务.步行导航服务.骑行路径规划服务等,这里我用的是驾车路线规划做一个列子. 驾车路线规 ...
- android高德地图绘制多边形_exlive1.0BS网上查车完善电子围栏：行政区域、多边形、规划线路...
exlive1.0位置服务平台--BS网上查车完善行政区域.多边形.规划线路三种电子围栏.已创建围栏支持在围栏列表选择,地图展示,直观查看. ①行政区域围栏:支持行政区域围栏创建,可设置驶入.驶出报警 ...
- vue openlayer单击地图事件循环多次执行_12道vue高频原理面试题,你能答出几道?
前言 本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B ...
- vue如何在末尾添加_怎样在Linux上开发vue项目
一.开发环境搭建:安装node.js环境以及vue cli工具 (1)安装node.js 从官网下载对应的二进制压缩包,如下图: 01.png 解压到程序安装目录 xz -d node-v12.17. ...
最新文章
- Ascend昇腾计算
- 吴恩达：数据集的规模和学习机制都很重要！
- 翻翻git之---溜的飞起的载入效果AVLoadingIndicatorView
- python内存管理可以使用del_Python深入学习之内存管理
- Spring MVC+Ant+Tomcat+Eclipse最简单的demo
- Citrix XenServer 池要求
- c语言 已知某系统在通信联络中,数据结构(习题)..doc
- java环境配置——配置tomcat用户
- 复盘Spring中定时任务和异步线程池
- 中的工程图怎样才能做成正规图纸_新一代一拖二口罩机图纸详细设计三维模型带工程图...
- [Lab1]-EIGRP试验
- 如何保持交互的可见性
- js 金额文本框实现代码
- 跨专业考计算机研究生有专业限制吗,我想跨专业考计算机专业研究生
- 真正提升关键词排名的外链应该怎样发？
- windows如何获取端口号
- 想在Windows上使用getopt，我教你原地起飞
- 面试必问---TCP连接
- java 修改图片名_Java修改文件夹下图片的名称
- 我的精神分裂——普通青年用二-B的方式走文艺的范儿