<template>
<div id="allmap"></div>
</template>
<script>
export default {
data() {
return {
arrayList: []
};
},
methods: {
BaiduMap() {
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();
}
}
});
var endFn = function() {
if (mode !== "") {
var waypoint = pointList.slice(
group * 28 + 1,
pointList.length - 1
);
if (mode === 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();
}
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>