【百度地图】制作多途经点的线路导航,模拟运动 (vue,typescript)
网上有从起点到终点的模拟线路和运动，途经点的比较少。 结合网上demo，再进行了一下修改。VUE （Typescript），先在index.html里引用<!DOCTYPE html><html lang="en"><head><meta charset="utf-8&
·
网上有从起点到终点的模拟线路和运动，途经点的比较少。 结合网上demo，再进行了一下修改。
VUE （Typescript），先在index.html里引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>得了么得</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></script>
</head>
<body>
<noscript>
<strong>We're sorry but tl_screen doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
然后声明, typescript里引用图片，需要require，不然会默认是百度的图片地址。
declare const BMap: any;
declare function require(iconUrl: string): string;
@Component
export default class MapScreen extends Vue {
}
private loadMap() {
const that = this;
const map = new BMap.Map('baidu-map');
map.clearOverlays();
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(113.044643, 28.169439), 15);
map.setMapStyle({ // 可以自己定义地图底图 http://developer.baidu.com/map/custom/
styleJson:[
{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#021019'
},
},
{
'featureType': 'highway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000',
},
},
{
'featureType': 'highway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#147a92',
},
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000',
},
},
{
'featureType': 'arterial',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#0b3d51',
},
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'color': '#000000',
},
},
{
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#08304b',
},
},
{
'featureType': 'railway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000',
},
},
{
'featureType': 'railway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#08304b',
},
},
{
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -70,
},
},
{
'featureType': 'building',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000',
},
},
{
'featureType': 'all',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#857f7f',
},
},
{
'featureType': 'all',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#000000',
},
},
{
'featureType': 'building',
'elementType': 'geometry',
'stylers': {
'color': '#022338',
},
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'color': '#062032',
},
},
{
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#1e1c1c',
},
},
{
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'color': '#022338',
},
},
{
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off',
},
},
{
'featureType': 'all',
'elementType': 'labels.icon',
'stylers': {
'visibility': 'off',
},
},
{
'featureType': 'all',
'elementType': 'geometry.fill',
'stylers': {
'color': '#08124fff',
'hue': '#02061d',
'lightness': 1,
'visibility': 'on',
},
},
],
});
const startPoint = new BMap.Point(113.044643, 28.169439); // 起点
const endPoint = new BMap.Point(112.545041, 28.285542); // 终点
const wayP1 = new BMap.Point(112.79513, 28.037395); // 途经点1
const wayP2 = new BMap.Point(112.86182, 28.316074); // 途经点2
const myIcon = new BMap.Icon( require('../assets/images/car.png'), new BMap.Size(40, 60), { // 小车图片
imageSize: new BMap.Size(35, 35),
imageOffset: new BMap.Size(0, 0), // 图片的偏移量。为了是图片底部中心对准坐标点。
});
const startIcon = new BMap.Icon( require('../assets/images/start.png'), new BMap.Size(30, 30));
const endIcon = new BMap.Icon( require('../assets/images/end.png'), new BMap.Size(30, 30));
const wayIcon = new BMap.Icon( require('../assets/images/way.png'), new BMap.Size(30, 30));
const wayPointIconHtml = `<div style='position:absolute; margin:0px; padding: 0px; width: 36px;
height: 40px; overflow: hidden;'>
<img src=''
style='display: none; border:none;margin-left:-11px; margin-top:-35px; '/>
</div>`;
const driving2 = new BMap.DrivingRoute(map, {renderOptions: { map, autoViewport: true},
onMarkersSet: (res: any) => { // 标注点完成回调
const startMarker = new BMap.Marker(startPoint, {icon: startIcon});
map.removeOverlay(res[0].marker); // 删除起点
map.addOverlay(startMarker);
const endMarker = new BMap.Marker(endPoint, {icon: endIcon});
map.removeOverlay(res[3].marker); // 删除起点
map.addOverlay(endMarker);
const warMarker1 = new BMap.Marker(wayP1, {icon: wayIcon});
res[1].Nm.Bc.innerHTML = wayPointIconHtml; // 删除途经点
map.addOverlay(warMarker1);
const warMarker2 = new BMap.Marker(wayP2, {icon: wayIcon});
res[2].Nm.Bc.innerHTML = wayPointIconHtml; // 删除途经点
map.addOverlay(warMarker2);
},
}); // 驾车实例
driving2.search(startPoint, endPoint, {waypoints: [wayP1, wayP2]}); // 显示一条公交线路
let positionOne: any = [];
let positionTwo: any = [];
let positionThree: any = [];
function run() {
const driving = new BMap.DrivingRoute(map);
driving.search(startPoint, endPoint, {waypoints: [wayP1, wayP2]});
const drivingOne = new BMap.DrivingRoute(map); // 驾车实例
drivingOne.search(startPoint, wayP1);
drivingOne.setSearchCompleteCallback( () => {
positionOne = drivingOne.getResults().getPlan(0).getRoute(0).getPath(); // 通过驾车实例，获得一系列点的数组
});
const drivingTwo = new BMap.DrivingRoute(map); // 驾车实例
drivingTwo.search(wayP1, wayP2);
drivingTwo.setSearchCompleteCallback( () => {
positionTwo = drivingTwo.getResults().getPlan(0).getRoute(0).getPath();
});
const drivingThree = new BMap.DrivingRoute(map); // 驾车实例
drivingThree.search(wayP2, endPoint);
drivingThree.setSearchCompleteCallback( () => {
positionThree = drivingThree.getResults().getPlan(0).getRoute(0).getPath();
});
driving.setSearchCompleteCallback( () => {
const totalPtS = [...positionOne, ...positionTwo, ...positionThree];
const paths = totalPtS.length; // 获得有几个点
const carMk = new BMap.Marker(totalPtS[0], { icon: myIcon});
map.addOverlay(carMk);
function resetMkPoint(i = 0) {
carMk.setPosition(totalPtS[i]);
if (i < paths) {
setTimeout( () => {
i++;
resetMkPoint(i);
map.setViewport([startPoint, wayP1, wayP2, endPoint]);
}, 2000);
} else { that.loadMap(); }
}
setTimeout( () => {
resetMkPoint(5);
}, 2000);
});
}
setTimeout( () => {
run();
}, 1500);
}
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)