vue里面实现百度地图标记多点地点连线

<template><div id="allmap"></div>
</template><script>
export default {data() {return {arrayList: []};},methods: {BaiduMap() {// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(121.443532, 31.24603), 13);map.enableScrollWheelZoom(true);function showPoly(pointList) {//循环显示点对象for (var c = 0; c < pointList.length; c++) {var marker = new BMap.Marker(pointList[c]);map.addOverlay(marker);//将途经点按顺序添加到地图上var label = new BMap.Label(c + 1, { offset: new BMap.Size(20, -10) });marker.setLabel(label);}var group = Math.floor(pointList.length / 29); //线路条数var mode = ""; //多余个数var remainder = pointList.length % 29;var calculate = remainder + group;//线条数 多余个数计算if (calculate === 29) {group += 1;} else if (calculate > 29) {group += 1;mode = calculate - 29;} else {mode = calculate - 1;}var driving = new BMap.DrivingRoute(map, {onSearchComplete: function(results) {if (driving.getStatus() == BMAP_STATUS_SUCCESS) {var plan = driving.getResults().getPlan(0);var num = plan.getNumRoutes();alert("plan.num ：" + num);for (var j = 0; j < num; j++) {var pts = plan.getRoute(j).getPath(); //通过驾车实例，获得一系列点的数组var polyline = new BMap.Polyline(pts);map.addOverlay(polyline);}searchFn();}}});//多出的一段单独进行searchvar endFn = function() {if (mode !== "") {var waypoint = pointList.slice(group * 28 + 1,pointList.length - 1);if (mode === 1) {//余数为1 途经点为空waypoint = [];}driving.search(pointList[group * 28],pointList[pointList.length - 1],{ waypoints: waypoint });}};var groupCopy = parseInt(group.toString());//整条线路递归var searchFn = function() {groupCopy--;if (groupCopy >= 0) {var i = group - groupCopy - 1;var waypoint = pointList.slice(i * 28 + 1, (i + 1) * 28);driving.search(pointList[i * 28],pointList[(i + 1) * 29 - (i + 1)],{ waypoints: waypoint });} else if (groupCopy == -1) {endFn();}};searchFn();}//将33个百度坐标点放入数据中var p1 = new BMap.Point(121.403532, 31.24603);var p2 = new BMap.Point(121.481477, 31.240103);var p3 = new BMap.Point(121.493262, 31.237015);var p4 = new BMap.Point(121.494987, 31.230099);var p5 = new BMap.Point(121.489382, 31.225034);var p6 = new BMap.Point(121.512953, 31.219846);var p7 = new BMap.Point(121.510222, 31.228122);var p8 = new BMap.Point(121.520715, 31.232198);var p9 = new BMap.Point(121.515828, 31.239485);var p10 = new BMap.Point(121.498724, 31.238868);var p11 = new BMap.Point(121.496568, 31.227505);var p12 = new BMap.Point(121.479177, 31.244178);var p13 = new BMap.Point(121.496712, 31.249365);var p14 = new BMap.Point(121.503323, 31.260972);var p15 = new BMap.Point(121.512953, 31.276158);var p16 = new BMap.Point(121.481764, 31.26838);var p17 = new BMap.Point(121.464804, 31.285293);var p18 = new BMap.Point(121.468685, 31.251587);var p19 = new BMap.Point(121.47041, 31.245289);var p20 = new BMap.Point(121.489094, 31.19106);var p21 = new BMap.Point(121.514534, 31.207987);var p22 = new BMap.Point(121.525314, 31.178208);var p23 = new BMap.Point(121.530363, 31.160422);var p24 = new BMap.Point(121.533363, 31.159422);var p25 = new BMap.Point(121.545005, 31.203169);var p26 = new BMap.Point(121.562252, 31.186364);var p27 = new BMap.Point(121.569295, 31.170422);var p28 = new BMap.Point(121.575907, 31.15559);var p29 = new BMap.Point(121.585907, 31.14559);var p30 = new BMap.Point(121.595907, 31.13559);var p31 = new BMap.Point(121.590007, 31.12559);var p32 = new BMap.Point(121.605907, 31.11559);var p33 = new BMap.Point(121.615907, 31.10559);this.arrayList.push(p1);this.arrayList.push(p2);this.arrayList.push(p3);this.arrayList.push(p4);this.arrayList.push(p5);this.arrayList.push(p6);this.arrayList.push(p7);this.arrayList.push(p8);this.arrayList.push(p9);this.arrayList.push(p10);this.arrayList.push(p11);this.arrayList.push(p12);this.arrayList.push(p13);this.arrayList.push(p14);this.arrayList.push(p15);this.arrayList.push(p16);this.arrayList.push(p17);this.arrayList.push(p18);this.arrayList.push(p19);this.arrayList.push(p20);this.arrayList.push(p21);this.arrayList.push(p22);this.arrayList.push(p23);this.arrayList.push(p24);this.arrayList.push(p25);this.arrayList.push(p26);this.arrayList.push(p27);this.arrayList.push(p28);this.arrayList.push(p29);this.arrayList.push(p30);this.arrayList.push(p31);this.arrayList.push(p32);this.arrayList.push(p33);//显示轨迹showPoly(this.arrayList);}},mounted() {this.BaiduMap();}
};
</script><style>
body,
html,
#allmap {width: 100%;height: 1200px;overflow: hidden;margin: 0;font-family: "微软雅黑";
}
</style>

vue里面实现百度地图标记多点地点连线相关推荐

百度地图API——多点路径连线问题
本文系作者 chaoCode原创,转载请私信并在文章开头附带作者和原文地址链接. 违者,作者保留追究权利. 前言本文是对于在项目应用有遇到的多点连线问题,我的一些解决方式,以及对于之前所学习的一些百 ...
百度地图JavaScript简单标点连线
背景最近在研究轨迹数据的挖掘,第一步就是把轨迹数据在地图上可视化出来,然后再进行后续的算法研究.从一开始懵懂知道百度地图有免费的 API 可以调用,到后面知道还要上传鹰眼轨迹,最后还要从 Web 端 ...
vue集合离线百度地图
vue集合离线百度地图 vue.js百度地图api离线发布于 1月9日一.需求场景所谓离线,大概都是项目在内网中使用,无法连接外网,所以需要开发离线地图功能. 在看以下步骤前,先提示这个vue项 ...
在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示
文章目录 1.在vue中引入百度地图的script 2.生成想要的地图样式 3.生成地图 4.创建3d棱柱 5.设置标记点和提示框 6.代码总结 1.在vue中引入百度地图的script 在publi ...
vue 页面使用百度地图
前言 vue 3.x 百度地图JavaScript API GL v1.0 百度地图的源码编辑器:http://lbs.baidu.com/jsdemo.htm#webgl0_0 本文代码在百度地图的 ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...
Vue中使用百度地图
安装 npm $ npm install vue-baidu-map --save cdn <script src="https://unpkg.com/vue-baidu-map&q ...

vue里面实现百度地图标记多点地点连线

vue里面实现百度地图标记多点地点连线相关推荐

最新文章

热门文章

vue里面实现百度地图 标记多点 地点连线

vue里面实现百度地图 标记多点 地点连线相关推荐

最新文章

热门文章

vue里面实现百度地图标记多点地点连线

vue里面实现百度地图标记多点地点连线相关推荐