VUE项目结合腾讯地图实现路线规划

1.先去腾讯地图开放平台申请一个key 腾讯地图开放平台

在index.html里加上

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=HFXBZ-NQSWI-ZGQGW-5URX4-WUXCF-VWFUQ"></script>

2.先给一个div盒子渲染地图数据需要

<template>
	<div class="map_box">
		<div id="map" style="width:1500px;height:650px;"></div>
	</div>
</template>

3.拿到当前地址信息

/**
* 腾讯地图获取当前定位
 */
Tmap() {
	let geolocation = new qq.maps.Geolocation("你申请的Key", "mapqq");
	// geolocation.getIpLocation(this.showPosition, this.showErr);
	geolocation.getLocation(this.showPosition, this.showErr); //或者用getLocation精确度比较高
},
showPosition(position) {
	// console.log(position);
	this.latitude = position.lat;
	this.longitude = position.lng;
	this.city = position.city;
	this.init(this.markers);//调用地图初始化
},
showErr() {
	console.log("定位失败");
	this.Tmap(); //定位失败再请求定位，测试使用
},

4.地图数据初始化

init(arr) {
	that = this;
	//初始化地图
	let center = new qq.maps.LatLng(this.latitude, this.longitude);
	let map = new qq.maps.Map("map", {
		zoom: 13,
		center: center
	});
	//标记提示窗
	let info = new qq.maps.InfoWindow({
		map: map
	});
	// 设置标记点信息
	for (let i = 0; i < arr.length; i++) {
		let data = arr[i];
		// 创建标记点
		let position = new qq.maps.LatLng(data.latitude, data.longitude),
			marker = new qq.maps.Marker({
				position: position,
				icon: new qq.maps.MarkerImage(data.icon),
				map: map,
			});
		this.arrayList.push(position)
		// 将必要的数据存入每一个对应的marker对象
		marker.id = data.id;
		marker.name = data.name;
		// 为标记添加事件，这里可改为点击事件
		qq.maps.event.addListener(marker, 'mouseover', function() {
			info.open();
			// 设置提示窗内容（this指向marker对象）
			info.setContent(`<div><p>${this.name}</p></div>`);
			// 提示窗位置 
			info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));
		});
		qq.maps.event.addListener(marker, 'mouseout', function() {
			info.close();
		});
	}
	this.showPath(center,map)//调用路线设置方法
},

5.路线规划方法

// 显示轨迹
showPath(center,map) {
	let directionsRoutes
	for (let i = 0; i < this.arrayList.length; i++) {
		this.driving = new qq.maps.DrivingService({
			complete: (response) => {
				console.log(response)
				directionsRoutes = response.detail.routes
				for (let j = 0; j < directionsRoutes.length; j++) {
					let route = directionsRoutes[j]
					let polyline = new qq.maps.Polyline({
						path: route.path,
						strokeColor: '#3893F9',
						strokeWeight: 6,
						map: map
					})
					this.routeLines.push(polyline)
				}
			}
		})
		this.driving.search(center, this.arrayList[i])
	}
},

地图调用的方法可参考 参考手册
完整的代码

<template>
	<div class="map_box">
		<div id="map" style="width:1500px;height:650px;"></div>
	</div>
</template>

<script>
	let that
	export default {
		data() {
			return {
				longitude: null,
				latitude: null,
				markers: [{
						"id": 1,
						"name": "北京后海酒店",
						"latitude": "30.735583",
						"longitude": "103.563148",
						"icon": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png"
					},
					{
						"id": 2,
						"name": "北京七天酒店",
						"latitude": "31.337589",
						"longitude": "104.588797",
						"icon": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png"
					}
				],
				arrayList: [], //路线坐标集
				driving:{},
				routeLines: []
			};
		},
		methods: {
			/**
			 * 地图
			 */
			init(arr) {
				that = this;
				//初始化地图
				let center = new qq.maps.LatLng(this.latitude, this.longitude);
				let map = new qq.maps.Map("map", {
					zoom: 13,
					center: center
				});
				//标记提示窗
				let info = new qq.maps.InfoWindow({
					map: map
				});
				// 设置标记点信息
				for (let i = 0; i < arr.length; i++) {
					let data = arr[i];
					// 创建标记点
					let position = new qq.maps.LatLng(data.latitude, data.longitude),
						marker = new qq.maps.Marker({
							position: position,
							icon: new qq.maps.MarkerImage(data.icon),
							map: map,
						});
					this.arrayList.push(position)
					// 将必要的数据存入每一个对应的marker对象
					marker.id = data.id;
					marker.name = data.name;
					// 为标记添加事件，这里可改为点击事件
					qq.maps.event.addListener(marker, 'mouseover', function() {
						info.open();
						// 设置提示窗内容（this指向marker对象）
						info.setContent(`<div><p>${this.name}</p></div>`);
						// 提示窗位置 
						info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));
					});
					qq.maps.event.addListener(marker, 'mouseout', function() {
						info.close();
					});
				}
				this.showPath(center,map)
			},
			// 显示轨迹
			showPath(center,map) {
				let directionsRoutes
				for (let i = 0; i < this.arrayList.length; i++) {
					this.driving = new qq.maps.DrivingService({
						complete: (response) => {
							console.log(response)
							directionsRoutes = response.detail.routes
							for (let j = 0; j < directionsRoutes.length; j++) {
								let route = directionsRoutes[j]
								let polyline = new qq.maps.Polyline({
									path: route.path,
									strokeColor: '#3893F9',
									strokeWeight: 6,
									map: map
								})
								this.routeLines.push(polyline)
							}
						}
					})
					this.driving.search(center, this.arrayList[i])
				}
			},
			/**
			 * 腾讯地图获取当前定位
			 */
			Tmap() {
				let geolocation = new qq.maps.Geolocation("你申请的Key", "mapqq");
				// geolocation.getIpLocation(this.showPosition, this.showErr);
				geolocation.getLocation(this.showPosition, this.showErr); //或者用getLocation精确度比较高
			},
			showPosition(position) {
				// console.log(position);
				this.latitude = position.lat;
				this.longitude = position.lng;
				this.city = position.city;
				this.init(this.markers);
			},
			showErr() {
				console.log("定位失败");
				this.Tmap(); //定位失败再请求定位，测试使用
			},
		},
		mounted() {
			this.Tmap();
		}
	};
</script>
<style scoped>
	#id {
		margin: 0 auto;
	}

	.map_box {
		display: flex;
		justify-content: center;
		padding: 30px 0;
	}
</style>