腾讯地图绘制-（开始地-结束地）-路线

腾讯地图绘制-（开始地-结束地）-路线

html页面引入

	<script src="https://map.qq.com/api/gljs?v=1.exp&key=RIXBZ-CH56Q-77V5H-G7S5U-Z2H3E-V7FS5&libraries=geometry"></script>

 引入jsonp 文件

import { VueJsonp } from 'vue-jsonp'

<template>
	<el-dialog title="物流进度" :visible.sync="dialogVisible" width="40%" style="min-height: 500px;" @close="closeDialg">
		<div class="logistics_progress" id="logistics_progress">

		</div>
	</el-dialog>
</template>

<script>
	import {
		get_launchone
	} from "@/api/order.js"
	export default {
		name: "Logistics_Progress",
		data() {
			return {
				dialogVisible: false,
				maps: "",
				launchSubNo: '',
					path:process.env.VUE_APP_URL,
				obj: {}
			}
		},
		watch: {
			dialogVisible: {
				handler(n, o) {

					if (n) {
						this.getLaunChone()
						//this.map_logistics();

					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			closeDialg() {
				if (this.maps) {
					this.maps.destroy();
				}
			},
			map_logistics(objs) {
				let that = this;
				let startlat = '';
				let startlng = '';
				let endlat = '';
				let endlng = '';
				if (objs.coortateStart) {
					startlat = objs.coortateStart.split(',')[0];
					startlng = objs.coortateStart.split(',')[1];
				}
				if (objs.coortateEnd) {
					endlat = objs.coortateEnd.split(',')[0];
					endlng = objs.coortateEnd.split(',')[1];
				}
				let z_lat = '';
				let z_lng = '';
				if (startlat && endlat) {
					z_lat = (Number(startlat) + Number(endlat)) / 2
				}
				if (startlng && endlng) {
					z_lng = (Number(startlng) + Number(endlng)) / 2
				}
				that.maps = new TMap.Map('logistics_progress', {
					center: new TMap.LatLng(z_lat, z_lng),
					zoom: that.getZoom(startlng, endlng, startlat, endlat)
				});
				that.$jsonp('https://apis.map.qq.com/ws/direction/v1/driving/', {
					key: 'RIXBZ-CH56Q-77V5H-G7S5U-Z2H3E-V7FS5',
					output: 'jsonp',
					from: objs.coortateStart,
					to: objs.coortateEnd
				}).then((res) => {
					that.openLine(res, startlat, startlng, endlat, endlng)
				}).catch((e) => {

				})
			},
			openLine(ret, s_lat, s_lng, e_lat, e_lng) {
				let that = this;
				var coords = ret.result.routes[0].polyline,
					pl = [];
				//坐标解压（返回的点串坐标，通过前向差分进行压缩）
				var kr = 1000000;
				for (var i = 2; i < coords.length; i++) {
					coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
				}
				//将解压后的坐标放入点串数组pl中
				for (var i = 0; i < coords.length; i += 2) {
					pl.push(new TMap.LatLng(coords[i], coords[i + 1]));
				}

				that.display_polyline(pl) //显示路线
				//标记起终点marker
				var marker = new TMap.MultiMarker({
					id: 'marker-layer',
					map: that.maps,
					styles: {
						"start": new TMap.MarkerStyle({
							"width": 25,
							"height": 35,
							"anchor": {
								x: 16,
								y: 32
							},
							"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
						}),
						"end": new TMap.MarkerStyle({
							"width": 25,
							"height": 35,
							"anchor": {
								x: 16,
								y: 32
							},
							"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
						})
					},
					geometries: [{
						"id": 'start',
						"styleId": 'start',
						"position": new TMap.LatLng(s_lat, s_lng),
						"properties": {
							"title": "marker"
						}
					}, {
						"id": 'end',
						"styleId": 'end',
						"position": new TMap.LatLng(e_lat, e_lng),
						"properties": {
							"title": "marker"
						}
					}]
				});


				var infoWindow = new TMap.InfoWindow({
					map: that.maps,
					   enableCustom: true,
					position: new TMap.LatLng(s_lat, s_lng),
					offset: {
						x: 0,
						y: -32
					}, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
					content: "<div class='infoWindow'><div class='space-between-left'><span class='window_icon'><img src='"+that.path+"/hiyfiles/wechat/Icon/delivery.svg'></span><span class='window_title'>深圳市</span></div>",

				});
				var infoWindow2 = new TMap.InfoWindow({
					map: that.maps,
					   enableCustom: true,
					position: new TMap.LatLng(e_lat, e_lng),
					offset: {
						x: 0,
						y: -32
					}, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
					content: "<div class='infoWindow'><div class='space-between-left'><span class='window_icon'><img src='"+that.path+"/hiyfiles/wechat/Icon/signfor.svg'></span><span class='window_title'>深圳市</span></div>",
				});

			},
			getZoom(maxLng, minLng, maxLat, minLat) {
				var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000",
					"100000", "200000", "500000", "1000000", "2000000"
				] //级别18到3。
				var pointA = new TMap.LatLng(maxLat, maxLng); // 创建点坐标A
				var pointB = new TMap.LatLng(minLat, minLng); // 创建点坐标B
				var distance = TMap.geometry.computeDistance([pointA, pointB]).toFixed(1); //获取两点距离,保留小数点后两位
				for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
					if (zoom[i] - distance > 0) {
						return 18 - i + 1; //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
					}
				};
			},
			display_polyline(pl) {
				let that = this;
				//创建 MultiPolyline显示折线
				var polylineLayer = new TMap.MultiPolyline({
					id: 'polyline-layer', //图层唯一标识
					map: that.maps, //绘制到目标地图
					//折线样式定义
					styles: {
						'style_blue': new TMap.PolylineStyle({
							'color': '#FF7B00', //线填充色
							'width': 5, //折线宽度
							'borderWidth': 2, //边线宽度
							'borderColor': '#FFF', //边线颜色
							'lineCap': 'round', //线端头方式
						})
					},
					//折线数据定义
					geometries: [{
						'id': 'pl_1', //折线唯一标识，删除时使用
						'styleId': 'style_blue', //绑定样式名
						'paths': pl
					}]
				});


			},
			async getLaunChone() {
				let _this = this;
				let {
					hasErr,
					data
				} = await get_launchone({
					launchSubNo: _this.launchSubNo
				})
				_this.$nextTick(function() {
					_this.obj = data.data; //主单没拿 这里只需要拿子单
					_this.map_logistics(_this.obj);
				})
			}
		}
	}
</script>

<style scoped>
	.logistics_progress {
		height: 400px;
		background: #eee;
	}
	/deep/ .infoWindow{
		background: #fff;
		height: 45px;
		line-height: 45px;
		border-radius: 20px;
		padding:0px 10px;
		box-shadow: 0px 0px 10px 2px  rgba(0,0,0,0.2);
	}
	/deep/ .infoWindow .window_icon{
		width: 30px !important;
		height:30px!important;
	}
	/deep/ .infoWindow .window_icon img{
		width: 100%;
	}
	/deep/ .infoWindow .window_title{
		font-size: 20px;
		line-height: 45px;
		margin-left:5px;
		font-weight: bold;
	}
</style>