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

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) //显示路线//标记起终点markervar 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); // 创建点坐标Avar pointB = new TMap.LatLng(minLat, minLng); // 创建点坐标Bvar 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>

腾讯地图绘制-（开始地-结束地）-路线相关推荐

高德地图-绘制去程和回程路线
1.问题背景设置去程和回程的路线图,并用不同的颜色设置路线 2.实现源码 <!doctype html> <html> <head><meta charse ...
在vue中使用腾讯地图绘制围栏功能
首先,先看效果图里面包含了自定义多边形绘制围栏.圆形绘制以及矩形等方式,以及清除围栏经纬度的方法和获取围栏经纬度的方法. 首先在项目的index.html中引入腾讯地图 <script cha ...
如何在腾讯地图绘制自己的坐标
1.页面直接引入 <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp">&l ...
小程序腾讯地图绘制大头针，以及还原位置
上一篇是绘制路线,这一篇是绘制大头针获取经纬度,以及左下角还原本地位置代码片 wxml文件 ** js文件 ** var QQMapWX = require('../../utils/qqmap-w ...
微信小程序腾讯地图根据起点终点绘制线路
图片:腾讯地图绘制线路图 ** 代码片 ** 下面展示同样高亮的代码片. // An highlighted block goto() {var that = this;var start = th ...
【腾讯地图API】制作多途经点的线路导航——路线坐标规划
面试:你懂什么是分布式系统吗?Redis分布式锁都不会?>>> 最近百度地图转腾讯地图以前用过百度地图实现路线坐标规划,不过搜索了一些没有搜索到腾讯地图的路线坐标规划,于是参数 ...
vue - vue使用腾讯api进行定位获取，绘制地图、标点、搜索、路线规划
章节目录 1,前言 2,准备 3,开始引入api 4,获取定位 5,绘制地图和标点 6,关键字搜索功能 7,驾车线路规划 8,两点经纬度的直线距离计算 9,使用过程中的一些常见问题 10,参考链接 1 ...
腾讯地图微信小程序JavaScript SDK
简介腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
百度地图绘制运动轨迹技巧
很多运动类的app都有画出跑步者运动轨迹的需求,拿咕咚来说,我们看一下它的效果图: 本篇将要实现的效果1.跑步结束后,静态的画出整个运动轨迹2.跑步过程中,时时动态的画运动轨迹如何实现: 1.将点与 ...

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

腾讯地图绘制-（开始地-结束地）-路线相关推荐

最新文章

热门文章