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